You only need no-repeat if the image is smaller than the container element, and you don't want it to tile across the element.
You don't need to use no-repeat if the image is set to cover, because if it is set to cover it cannot possibly repeat anyway. This is all you need...
And yes, fixed background images on the body tag are known to cause scrolling issues sometimes. The problem is that fixing the background image forces the browser to recalculate and repaint everything as soon as you scroll at all, so things can get jaggy.
Firefox has a history of intermittent issues with it, depending on version. IIRC Safari/iPhone also had issues with it at one point. I would not be surprised if some versions of Chrome, on some devices, are having similar issues at the moment.
You don't need to use no-repeat if the image is set to cover, because if it is set to cover it cannot possibly repeat anyway. This is all you need...
Code:
body {background: url("./images/foo.jpg") fixed 50% 50% / cover;}Firefox has a history of intermittent issues with it, depending on version. IIRC Safari/iPhone also had issues with it at one point. I would not be surprised if some versions of Chrome, on some devices, are having similar issues at the moment.
Statistics: Posted by Gumboots — Sat Jan 04, 2025 1:50 am