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.

9
  • They're separately specified for the individual divs. From what I read, background-image can be excluded from background. Am I wrong? May 23, 2018 at 23:00
  • The code I posted works. I was wondering why I couldn't replace "center" with "inherit". If what you're saying is true, my code shouldn't work at all. May 23, 2018 at 23:02
  • 1
    well It was about something else ... but you cannot inherit a part of a property I guess May 23, 2018 at 23:04
  • check this developer.mozilla.org/en-US/docs/Web/CSS/background and you will see the formal syntax [the BIG blue box], you need to follow this syntax and inherit is not allowed May 23, 2018 at 23:06
  • That's probably it. I used inherit as a subvalue when it can only be used as a full value. May 23, 2018 at 23:07

1 Answer 1

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

1
  • 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. stackoverflow.com/questions/60930928/…
    – Andrew
    Mar 30, 2020 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.