: How does "background:cover" CSS property works? I'm currently "fighting" with an issue with parts of a website that I need to be fully covered by a picture. Thus, I tried the background:cover
I'm currently "fighting" with an issue with parts of a website that I need to be fully covered by a picture. Thus, I tried the background:cover CSS property.
Well, to be complete, I didn't actually chose : I'm working with a Wordpress theme but I largely customize it. Options included in the theme allows to chose between "standard" background for headers or a "cover" one.
But it doesn't work as I imagined.
Here's how I assumed it works : given a resolution of 1920px wide, and, on the website, a header vertical space of 500px. If I make a 1920x500px background and place it as a Background with the Cover property, isn't it supposed to not be enlarged and displayed on it's original size, since the resolution allows it ?
If I make a background wider and higher than the "container", again with the Cover property, isn't it supposed to shrink ?
Doesn't Cover property supposed to resize itself until it matches either the width nor the height of the container ?
Currently, it seems that every background I made, with several sizes, are enlarged, not giving the expected result. Yet, I give it a height equal to the height of the container, and and width way superior of the width of the container. I don't understand why it's enlarged.
Can you tell me if I correctly understand the way the CSS background:cover property works or if it may be an issue in the code ?
What do you say ? PEBKAC nor not PEBKAC ? :D
I hope I made my asking understandable.
Thank you very much.
More posts by @Heady304
1 Comments
Sorted by latest first Latest Oldest Best
It depends on the container. If the container is the window/body then the image will be greater than the smallest length.
From MDN - background-size
Cover
This keyword specifies that the background image should be scaled to
be as small as possible while ensuring both its dimensions are greater
than or equal to the corresponding dimensions of the background
positioning area.
For testing purposes check out this codepen to see how the different background properties effect the background image: codepen.io/obojdi/pen/lHgbF/
Here is another in-depth tutorial going over all of the CSS3 background size properties
www.css3.info/preview/background-size/
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.