Getting An Element To Overlap An Image

I am trying to get this h1 tag with an image inside to overlap the div below it (including it's child elements, which are floated inside). Using a negative margin works in Chrome a

Solution 1:

I don't have any code, but you already done it so you can put the code that worked for you. Should be something like:

.banner {
  background: url(yourimage'surl) no-repeat 0% 0%;
  height: yourimage'sheight;
}

if you need more images or even background color/gradients you can separete them by comma

something like:

background: url(yourimage'surl) no-repeat 0% 0%, url(anotherimage) no-repeat 100% 100%, #888;

Solution 2:

You should use position: relative; and display: block; for negative margins to work

Solution 3:

Positioning the image absolute inside your h1 is your best option. If you then want to reposition the image you can give in some margin or padding. Negative margins and browser compatibility is really not best friends

.logo img {
    position: absolute;
}

If you apply

header .banner {
    float: left;
}

This will fix it for IE and Firefox but will break it for Chrome. You can then maybe user a hack to apply this style only to IE and Firefox...but i wouldn't recommend this

@-moz-document url-prefix() {
    header .banner {float: left;}
}

<!--[if lte IE 9]>
<style>
    header .banner {float: left;}
</style>
<![endif]-->