Full screen cover background overflow

[tjgriffiths1]

Hi all,

After following the ‘Perfect Full Page Background’ tutorial here on CSS-Tricks, I noticed that the images had a bit of overflow, and cut off maybe 10-20 pixels from each side. I have messed around with the image dimensions, but have not seen a change.

Is there a way to use the ‘cover’ attribute, without the overflow? If not, is there an alternative?

Thanks in advance,

[mhodges44]

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.
http://codepen.io/mhodges44/pen/ojrRKy

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!

[Author]

Posts