2

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.

Isaac Saffold
  • 1,116
  • 1
  • 11
  • 20

1 Answers1

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.

enter image description here

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Temani Afif I asked as question if this was wrong and you just marked it as a duplicate of this! that was not helpful at all! as I could write mine myself, but this was in bootstrap so would have been much more professional to say what is wrong and not point me to this. As I still don't know what exactly is wrong with it. https://stackoverflow.com/questions/60930928/css-background-long-syntax-issue – Andrew Mar 30 '20 at 13:25