how to ovveride a background-color in CSS?

Question

I gave my body this property

body {
    background: linear-gradient(to bottom, rgba(233, 44, 3, 2), rgba(255, 0, 0, 0));
}

and a div this one

div {
    background: linear-gradient(to bottom, rgba(175, 113, 236, 0.8), rgba(175, 113, 236, 0.3));
}

The problem is that the items in my div ( h1 for example) have the body background color even if the rest of the div got the other color.

How can I override the body color for all elements inside my div.

Is the style for the ```div``` underneath the style for the ```body```? — freefall, Aug 13 '21 at 00:55
Do you have a picture of the results you see? I see this: https://codepen.io/riza-khan/pen/JjNzJZW — Riza Khan, Aug 13 '21 at 00:56
You always have `!important` as a last solution (in case everything else doesn't work) — Jongwoo Lee, Aug 13 '21 at 01:25
Does this answer your question? [What are the implications of using "!important" in CSS?](https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) — Dai, Aug 13 '21 at 03:02

score 0 · Answer 1 · answered Aug 13 '21 at 01:24

Something doesn't seem right about that, it should be inheriting the color of the parent div, so check that your elements are nested properly, or that your div is properly wrapping the other elements. If the problem persists, you can also force the background color to inherit a number of ways:

It can be done with the inherit keyword in CSS. You could use this keyword on each element within the div.

To offer just a little more understanding though, what really may be happening is that the elements within the div have no background color set, so they may be coming out "transparent" and showing the body element color underneath.

So if each element within the div is the same you could set the background color for them to the color of the containing div to match. This could be done with a selector such as div > p if all of the elements are paragraphs.

Also keep in mind/watch the external css page, page level, and inline css weights, with page level overriding external, and inline overriding page level respectively.

score -1 · Answer 2 · answered Aug 13 '21 at 02:55

Try this, it works as it should no change in code also

body {
    background: linear-gradient(to bottom, rgba(233, 44, 3, 2), rgba(255, 0, 0, 0));
}

div {
  width: 300px; height: 300px; /* Just for DEMO */
  background: linear-gradient(to bottom, rgba(175, 113, 236, 0.8), rgba(175, 113, 236, 0.3));
}

<div>
<h1>Lorem Ipsum</h1>
</div>

how to ovveride a background-color in CSS?

2 Answers2