jeromesubs Posted July 15, 2016 Share Posted July 15, 2016 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 More sharing options...
dsonesuk Posted July 15, 2016 Share Posted July 15, 2016 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 More sharing options...
Ingolme Posted July 15, 2016 Share Posted July 15, 2016 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 More sharing options...
jeromesubs Posted July 17, 2016 Author Share Posted July 17, 2016 Thanks for the explanation! I will try to set the height to 100%. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2016 Share Posted July 18, 2016 Err??? What difference does adding 100% height to html and body make? The background image will still fill viewport area wether set 100% height or not? Link to comment Share on other sites More sharing options...
Ingolme Posted July 18, 2016 Share Posted July 18, 2016 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 More sharing options...
dsonesuk Posted July 18, 2016 Share Posted July 18, 2016 WRONG! You will find the body element does not in fact work like that! Applying background-color to body or image will fill the veiwport area No matter how much content you have within it. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2016 Share Posted July 18, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now