1 Reply Latest reply on Jul 31, 2007 7:33 PM by Tazmun

    adding images on top of a background

    hygieneboy Level 1
      Im trying to do something that should be very easy.......I have two divs in my code that look like this:

      <div id="header">
      <img src="../Extraimages/goldishheader.png">
      </div>

      <div id="main">

      </div>

      I have some CSS code that looks like this:

      #main {background-image: url(../Extraimages/blueblackgradientbackground.png);
      width: 800px;
      height: 800px;
      position: absolute;
      top: 8px;
      left: 4px;
      }

      #header {top: 68px;
      left: 7px;


      My intent was to use the CSS code for the "main" div and set a background gradient that I created in Fireworks. The background shows up fine, just like I want it.

      However, the issue is with the "header". I have created a separate file in fireworks called "goldishheader" that I want to insert on top of the background. With the code written as is, it is inserted behind the background, therefore not visible.

      I used the z-index coding, but it did not deliver consistent results. Am I missing something??
        • 1. Re: adding images on top of a background
          Tazmun
          quote:

          Originally posted by: hygieneboy
          Im trying to do something that should be very easy.......I have two divs in my code that look like this:

          <div id="header">
          <img src="../Extraimages/goldishheader.png">
          </div>

          <div id="main">

          </div>

          I have some CSS code that looks like this:

          #main {background-image: url(../Extraimages/blueblackgradientbackground.png);
          width: 800px;
          height: 800px;
          position: absolute;
          top: 8px;
          left: 4px;
          }

          #header {top: 68px;
          left: 7px;


          My intent was to use the CSS code for the "main" div and set a background gradient that I created in Fireworks. The background shows up fine, just like I want it.

          However, the issue is with the "header". I have created a separate file in fireworks called "goldishheader" that I want to insert on top of the background. With the code written as is, it is inserted behind the background, therefore not visible.

          I used the z-index coding, but it did not deliver consistent results. Am I missing something??



          Try it this way, putting the header div inside the main div. Z-index only works if your using layers, which you have not established on both divs. Main is actually set up to be a layer as you have it though, where header is not



          <div id="main">
          <div id="header">
          <img src="../Extraimages/goldishheader.png">
          </div>

          </div>