Search code examples
htmlcss

Image on top of background-image

Obviously, I'm not doing this right. I'm trying to get my logo on top of my header which is .head. How would I go about doing this? When I do it in the way provided below, my image pops above my header and not on it.

Markup

<img src="\logo.png" width="96" height="82">
<div class="head"></div>

CSS

.head {
    background-image: url('header_bg.png');
    top: repeat-x;
    height: 110px;
}

body {
    padding: 0;
    margin: 0;
}
Solution

  • Put the image tag inside the div?

    <div class="head">
    <img src="\logo.png" width="96" height="82">
</div>

    Example of centering the img inside the div, horizontally only:

    <div class="head">
    <img src="http://placekitten.com/200/100">
</div>

.head {
    width: 300px; height: 300px;
    background: transparent url(http://placekitten.com/300/300) no-repeat;    
}

.head img {
    display: block;
    margin: 0 auto;    
}