CODEWITHSUNDEEP
css
Trido
Trido

Reputation: 545

Image Overlay not working

I can't seem to get this image overlay to work and I don't understand where I am going wrong. When I have the headerImageOverlay just below the header it looks worse. Right now, the background logo looks fine, but the image to overlay is in the correct position, but below the logo rather than on top. Any assistance would be appreciated.

First the CSS:

.container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
}

.headerImageOverlay {
float: right;
padding: 1px;
width: 127px;
position: relative;
}

img.overlay {
position: absolute;
right: 0px;
top: 0px;
z-index: 10;
}

img.logo {
z-index: 1;
display: block;
}

.spanner {
position: absolute;
width: 100%;
height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

And now the HTML:

<div class="container">
  <div class="header">
    <img src="images/logo.jpg" class="logo" width="850" height="166" /> 
  </div>
  <div class="headerImageOverlay">
    <span class="spanner">
      <img src="images/ross.jpg" class="overlay" />
    </span>
  </div>
</div>

Upvotes: 0

Views: 2108

Answers (1)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

...live demo........

HI now define .container position:relative; and remove .headerImageOverlay position:relaive;

    .container {
      position: relative; // add this line in your css
    }

.headerImageOverlay{
position: relative; // remove this line in your css
}

Upvotes: 3

Related Questions