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%;
}

Recommended Answers

All 5 Replies

Hi SureEM25,

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

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

<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.

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

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.