How to create transparent background from div?-CodePudding

I am a complete newbie. I have to use a template for a web design class I am taking. I am trying to remove the background color of a div and cannot do so, except when I remove the header PNG I have placed. The background of the PNG is transparent.

This is a link to the template: https://drive.google.com/drive/folders/1wkxt_QTN4MyWOBZuZlUrGNaafeLNkCsO?usp=sharing

Appreciate any help, thank you!

header {
    background-color: transparent;
    background: transparent; 
    
}

.header {
    background-color: transparent;
    background: transparent; 

}

.grid-container {
    background-color: transparent;
    background: transparent; 
}


.top-bar{
    background-color: transparent;
    background: transparent; 
}

.top-bar-left{
    background-color: transparent;
    background: transparent; 
}

.top-bar-right{
    background-color: transparent;
    background: transparent; 
}

.menu {
    background-color: transparent;
    background: transparent; 
}

menu {
    background-color: transparent;
    background: transparent;

<header >
  <div >
        <div >
            <ul >
            <img src="img/headerimage.png" alt=""/>  
          </ul>
    </div>
        <div >
            <ul >
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="resources.html">Resources</a></li>
            </ul>
        </div>
  </div>
</header>

CodePudding user response：

Since you're trying to remove the background color of a DIV element, you could use rgba(0, 0, 0, 0.0);

So your CSS should look like this:

header {
    background-color: rgba(0, 0, 0, 0.0);
    background: rgba(0, 0, 0, 0.0);
}

.header {
    background-color: rgba(0, 0, 0, 0.0);
    background: rgba(0, 0, 0, 0.0); 
}

.grid-container {
    background-color: rgba(0, 0, 0, 0.0);
    background: rgba(0, 0, 0, 0.0); 
}

Alternatively; you could remove background and background-color and just use opacity: 0;. I hope this helps you out!

CodePudding user response：

Give a height and width to your div and then make image small ex take 200*200 px and make div bigger than that so that your image comes inside the div then change it's background then you will be able to do so. If you don't understand reply here again.