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
