Help with my Background Picture

Hi all,

I am doing my Tribute page but i would like to find out as i a sure i am doing it wrong. I would like to have my one picture as the full background. This is the code that I have: (which i googled)

html { background: url(http://www.theboxmag.com/content/content/9742/Rich-Froning.jpg) center fixed;
webkit-background-size: cover;
moz-background-size: cover;
o-background-size: cover;
background-size: cover;
}

But it is cutting the picture at the top and the bottom…Can someone please help me get this right?

Thank you

1 Like

Do you have the project in an online project like CodePen that you can share?

The size setting cover will ensure that the entire background is covered by the image, even if it means clipping. If you want the full picture to be shown, use the setting contain.

1 Like

Yup thats where I got that code from… but does not seem to work…

Have you checked there’s no other rules having an effect? Something like a fixed height on the container that makes it impossible to keep the aspect ratio without cropping the edges?

Also, you can do things like use the top value instead of the centre value. That will position your pic at the top but if the container is somehow fixed dimensions then it will also overflow, effectively cropping off what doesn’t fit from the bottom or sides.

And also, your image is portrait orientation.

I assume your cover is 100% of the screen width? on wider screens that is going to cut loads of the top and bottom.

usually best to use an image with landscape orientation like this

1 Like

thanks for the help that Pic seems to work better.