damd damd - 2 months ago 5
CSS Question

How does "background-size: cover" work in this case?

Excuse the bad title, I just can't think of a good one.

See my example here

element is identical to one another, and they all have the same background-image set. They also have background-size: cover, to have the background image take up as much space as possible, but not more.

But it seems like the articles are ganging up on me and trying to, I dunno, show one part of the image each?

Am I going crazy? I can't even explain it right, I hope someone understands.


You have set background-attachment: fixed in your shorthand:

background: url(/assets/img/clips/placeholder.png) no-repeat center center fixed;

So just remove it and it'll be fine.

background: url(/assets/img/clips/placeholder.png) no-repeat center center;

Or don't use the shorthand version:

background-image: url(/assets/img/clips/placeholder.png);
background-repeat: no-repeat;
background-position: center center;
/* background-attachment: fixed; */

More about background-attachment on CSS-TRICKS.