background-size:cover 是否使 background-position:center 和 background-repeat:no-repeat 变得不必要？

Question

Learning css, and I had a question about background-size: cover . Everything is working, but all guidance I look at tells me to also include background-repeat: no-repeat and background-position: center if I want a background image that does not repeat and is centered. Shouldn't background-size: cover be sufficient for centering the image and stopping it from repeating? I'd love to trim unnecessary lines, but before I do, I'm wondering whether someone with more experience can point out a misunderstanding or edge cases the additional rules take care of.

.main {
  background-image: url("#");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Answer 1

While the question looks opinion-based at first sight, and the answer seems to be "it doesn't matter", the reality is it does.

Take this example where you put a 100×100 image as a background in a 300×150 container.
In the absence of any other styles, the background-position is 0% 0% (see W3C ) and it looks like this:

 div { width:300px; height:150px; background-image: url('https://via.placeholder.com/100x100'); background-size:cover; }

 <div></div>

where the image is stretched to 300×300 to fit the div, and the result shows only the top half of the image.

Then, adding background-position:center results in this:

 div { width:300px; height:150px; background-image: url('https://via.placeholder.com/100x100'); background-size:cover; background-position:center; }

 <div></div>

where the middle half of the image is shown!

So the answer is: no, using background-size:cover by itself doesn't center the image, and you will need background-position to adjust.

Then there's the matter of background-repeat . As was mentioned in the comments, you can position a background image in such a way that it doesn't cover the container, even if background-size is cover . When you look at this fiddle , you will see two halves of the background image. Then if you add background-repeat:no-repeat to the css, there's only one half, and it will not cover the entire div.

So in that case, the answer is: it depends on your needs.

Hope this helps!