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 div
s.
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.