I was trying to override a pre-defined background-image in a CSS with an inline background-color thinking it would actually override, but it looks it doesn't. How can I achieve this?

.section {
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  background-image: url(".jpg");
  background-size: cover;
}

<div class="section" style="background-color: rgb(250, 40, 38)">
  
</div>

I was trying to override a pre-defined background-image in a CSS with an inline background-color thinking it would actually override, but it looks it doesn't. How can I achieve this?

.section {
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  background-image: url("https://static.pexels./photos/36487/above-adventure-aerial-air.jpg");
  background-size: cover;
}

<div class="section" style="background-color: rgb(250, 40, 38)">
  
</div>

Thanks.

• javascript
• html
• css

• 1 Because background image always displays "covering" the background color. Add background-image: none to your inline styles and you're good to go. – random_user_name Commented Jan 26, 2017 at 23:53
• 1 you can also use background inline instead of background-color – Jaromanda X Commented Jan 26, 2017 at 23:56

7 Answers 7

https://www.w3/TR/css3-background/#the-background-color

This property sets the background color of an element. The color is drawn behind any background images.

You can have both background-color and background-image. If you want to override the background-image you need to do this with background: rgb(250, 40, 38).

As for the WHY:

you have these background properties:

background-image
background-repeat
background-color
background-size

etc.

Now if you set background you include all these properties so you can specify this:

background-image: url(image.jpg)

or background-color: rgb(250, 40, 38)

or background: rgb(250, 40, 38)

This last one will assume there is no image because it is not specified in background and will thus override it with the specified background color

Try this. Worked for me.

.section {
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  background-image: url("https://static.pexels./photos/36487/above-adventure-aerial-air.jpg");
  background-size: cover;
}

<div class="section" style="background-image:none; background-color: rgb(250, 40, 38)">
  
</div>

I think the issue is that you need to both add your css for the new colour but also the styling for the background image itself.

If you are wanting to hide the image so that your colour will e through and be visible add

<div class="section" style="background-color: rgb(250, 40, 38);background-image:none;">
  
</div>

That should do the trick. :) Hope this helps

Use background instead of background-image and background-color :

.section {
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  background: url("https://static.pexels./photos/36487/above-adventure-aerial-air.jpg");
  background-size: cover;
}

<div class="section" style="background: rgb(250, 40, 38)">

and it will work!

Just set background-image:none;

eg;

.section {
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  background-image: url("https://static.pexels./photos/36487/above-adventure-aerial-air.jpg");
  background-size: cover;
}

<div class="section" style="background-image:none; background-color: rgb(250, 40, 38)">
  
</div>

EDIT: The reason image has higher priority is if you want to use an image but an object can extend beyond the image size (and you have repeat set to none) then the background-color fills the rest of the space.

The spec was written with progressive enhancement in mind:

Use background image, to display an image, and background color as a fallback for older browsers.