Member Avatar for SureEM25

Hello I am trying to add a Image to my header where it will show the body background but it is not doing as i need, here is my code

C:\Users\SureShotM\Main.cssbody
{
background-color:#4E9258;
}

#container
{
margin: 0 auto;
width: 700px;
background:#fff;
}

#header
{
background-image:url('MineMad.png');
background-repeat:no-repeat;
background-position:left top;
padding: 120px;
}

#header h1 { margin: 0; }

#content
{
clear: left;
padding: 20px;
}

#content h2
{
color:#000;
font-size: 160%;
margin: 0 0 .5em;
}

#footer
{
background:#ccc;
text-align: right;
padding: 20px;
height: 1%;
}
  • 3 Contributors
  • 5 Replies
  • 114 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by SureEM25

Dani AI

Generated

Good debugging trail — nailed the root cause. Because your #header sits inside #container, any transparent parts of the header image will reveal the container’s background (the white you gave it), not the page body. That is why the green body color wasn’t showing through. was right to flag layout/padding as a possible red herring, and ’s HTML prompt was useful — the markup determines which background sits behind which element.

Practical fixes (pick one based on the layout you want)

  • Remove or make the container background transparent (what you did). Then apply the white background only to the content area so the header can reveal the page background.
  • Move the header outside the container so it sits directly on the body (header above, container below).
  • If the container must stay where it is, lift the header visually (negative top margin or absolute positioning) so it overlaps the body background instead of sitting inside the white box.
    Also consider giving the header an explicit height equal to the image (or use background-size for responsive scenarios) instead of using large padding, which can distort alignment.

Quick troubleshooting checklist

  • Confirm the PNG actually has transparency (open it in an editor).
  • Ensure the background URL in your CSS is correct and respects case sensitivity on the server.
  • Use browser dev tools to inspect computed backgrounds and see which element is painting the white color.
  • Clear the cache after changes and test in multiple browsers.

If the goal is a centered white content panel with a header that shows the page background, the cleanest pattern is: header on the body (or transparent container) and a separate inner wrapper for the white content. That keeps the stacking simple and avoids surprises.

Recommended Answers

All 5 Replies

Member Avatar for gil857

Hi SureEM25,

Your padding could be hiding it - 120px is huge. How big is your header container?

Member Avatar for JorgeM

If you can provide the relevant HTML as well, that would be helpful.

Member Avatar for SureEM25 
<div id="container">

<div id="header">

</div>
<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a> 
    <ul>
      <li><a href="#">The Team</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Vision</a></li>
    </ul>
  </li>
  <li><a href="#">Products</a> 
    <ul>
      <li><a href="#">Cozy Couch</a></li>
      <li><a href="#">Great Table</a></li>
      <li><a href="#">Small Chair</a></li>
      <li><a href="#">Shiny Shelf</a></li>
      <li><a href="#">Invisible Nothing</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a> 
    <ul>
      <li><a href="#">Online</a></li>
      <li><a href="#">Right Here</a></li>
      <li><a href="#">Somewhere Else</a></li>
    </ul>
  </li>
</ul>

<div id="content">
</div>

<div id="footer">
</div>
</div>

here is the html that goes with the css note this is not the actualy content becuase I was coping from one of my practice sites.

Edited by SureEM25
Member Avatar for SureEM25

If you need the size of the image it is 700x243

Member Avatar for SureEM25

ok figured it out, I had a background to the container its self.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.