I am struggling to set a background image that fits the entire screen. It looks great on Windows, but when I view the same page on my mobile device (specifically Android using Google Chrome), the image zooms in and out oddly. Additionally, there seems to be an extra margin at the bottom of the page that wasn't there before.
This issue arises when I include:
background-attachment: fixed;
If I remove this line, everything displays as expected, however, the image doesn't look quite right. This is how I have it set up:
background: url('image url');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
Any assistance would be greatly appreciated! I simply want to set a background image for the entire body tag without encountering this mysterious bottom margin.