how to apply background color to container same sa page background

Question

my web page has background set as linear gradient. i want to apply same background to my div. how to override default background of div.

<div class="bg">
   <div>
       content
   </div>

</div>
.bg{
      background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(0deg, #F0F8FF, #F0F8FF);
 }

i want to apply bg to inner div. inner div has white background how can i set priority of background color.

Default background is transparent. It's not clear what you are trying to achieve — Paulie_D, May 28 '21 at 18:48
If you do a basic Google search you will get several answers ... Or even here on the stackoverflow you can have this question answered. — Paulo Boaventura, May 29 '21 at 05:33
Does this answer your question? [How do I give text or an image a transparent background using CSS?](https://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css) — Paulo Boaventura, May 29 '21 at 05:34

score 0 · Accepted Answer · answered May 28 '21 at 19:05

It sounds as though somewhere the background of the inner div is being set to white (otherwise it would have the default which doesn't set it, i.e. acts like transparent).

To override that you could have:

.bg div {
   background: transparent;
 }

at the end of your style sheet.

If that doesn't work, have a look in your browser's dev tools, inspect the div and see where/who is setting the background white. At worst you may have to put a !important on the setting, or put it inside the element as a style attribute.

.bg{
      background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(0deg, #F0F8FF, #F0F8FF);
 }
 
.bg div {
   background: transparent;
 }

<div class="bg">
   <div>
       content
   </div>

</div>

how to apply background color to container same sa page background

1 Answers1