The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Full screen cover background overflow Reply To: Full screen cover background overflow


Cover does a great job as long as the browser height size stays relatively similar to the width. If you go overly narrow without adjusting the height similarly, what you are describing occurs.

This is an issue I have run into many times, and with using the background-image property, I have not found a way around this. Obviously if you don’t do the “background-position: cover”, you will keep the full image, but the image will not cover the entire height on a narrow screen without tiling.

One thing you can do is to do what I have shown in this codepen.

Using an image that acts as a background-image (div #2 in the codepen) is a great way to make sure you always keep the entire image in view, but at certain screen resolutions, the image can look compressed or stretched (although so can cover, so this may be a non-issue). It really depends on your use case.

One nice thing about using an instead of the background-image property is that you can set things like animations, opacity, etc. with using the background property, you are fairly limited in what you can do, style-wise.

I have found this to be a great workaround when I absolutely need it, but most of the time, I will try to find either:
1. A seamless tileable background image
2. An image where losing parts does not take away from the aesthetics

Hope this helps!