Issues with “background-position” in “background” shorthand property

问题

I was attempting to use the background shorthand property to specify background-size, background-repeat, and background-color, but kept failing. I eventually realized that you have to set background-position if you set background-size, so I just set the property as inherit / contain no-repeat #FF7000, as to the best of my knowledge, the default background-position should be inherited from the parent (body, in this case), as I have not explicitly set body's background-position. It still didn't work. However, this worked: center / contain no-repeat #FF7000. Why would setting it explicitly work and allowing it to inherit not work? My guess is that my understanding of how inherit works is mistaken, but I'm not sure.

Here's the entirety of the relevant code:

.side_img
{
    width: 150px;
    height: 300px;
    background: center / contain no-repeat #FF7000;
}

#left_side
{
    background-image: url("images/giraffe_painting.jpg");
}

#right_side
{
    background-image: url("images/giraffe_painting_reversed.jpg");
}

Also, in case this matters, the id selectors refer to divs.

回答1:

As stated in the documentation of the background property, background-size cannot be set alone and it should be used with background-position. Also inherit and initial aren't valid values for those properties.

来源：https://stackoverflow.com/questions/50498602/issues-with-background-position-in-background-shorthand-property