Jump to content

background-image and background-size: cover


jeromesubs
 Share

Recommended Posts

Hello,

 

I have define a background image on the body.

I want the image width to match the browser screen width (and to be resized if the screen gets smaller or bigger).

I have one background image for the home page, and another background image for all the other pages.

 

So, to do that, I found the background-size property, using the "cover" value.

It works great on the home page, but on the other pages, the behavior is changing.

It's seems that the background image size changes depending on the "body" height instead of changing depending on the screen size.

E.g., on the Concerts page, with a long body, the background image is way too big and goes beyond browser width.

But on the Music page, which is empty, with a very short body, the image fits the browser as I want.

 

You can check the website here: http://www.orange-mist.com/

This is my CSS code:

/*
Background image style for other pages
*/
body.page, body.archive {
	background-image: url('http://www.orange-mist.com/wp-content/uploads/2016/07/background_oiseaux-et-brume-orange_opa45.jpg');
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment: scroll;
	background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}

/*
Background image style for home page
*/
body.home {
	background-image: url('http://www.orange-mist.com/wp-content/uploads/2016/07/orange-mist-background.jpg');
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment: scroll;
	background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}

I found that I have a better result using the "contain" value instead of "cover", but it's still not really what I want.

 

This is not the behavior I was expecting, but there is probably something I don't understand ...

 

If somebody could help me find out where the issue is, that would be great :)

 

Thanks

Link to comment
Share on other sites

cover: (proportional)

The image will resize both directions proportionately until the whole area is completely filled, if the width is filled but the height has more of an area still remaining to fill, the width will continue to increase beyond a area until the height is filled.

 

contain: (proportional)

The image will resize both directions proportionately until whatever comes first, either the height or width area is completely filled, then it will stop, meaning, by taking same scenario from above, there will be an unfilled area at the bottom.

 

100% 100% (disproportional)

The image will stretch both directions disproportionately until whole area is filled.

 

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

Link to comment
Share on other sites

If you put the background image on the body, it will only cover the area that the body covers. You can set the height of the html and body elements to 100%

html, body {
  height: 100%;
}
Link to comment
Share on other sites

The <body> element does not fill the whole viewport, if you set a background color to the body and put a single line of text in it you'll see that the body tag only extends as far down the page as the text does.

 

The <html> element generally should fill the viewport, but I wouldn't rely on it. Setting height to a percentage value only works if the parent element also has a defined height, this is why the height needs to be applied to both the <html> and <body> tags.

Link to comment
Share on other sites

Also using html, body {height:100%} will restrict height of background-image to viewport height, if you are going to use this method it would be better to use min-height: 100%; which will give background-image ability to extend beyond viewport height when content extend beyond this height.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...