CODEWITHSUNDEEP
htmlcss
Zevoxa
Zevoxa

Reputation: 301

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

Upvotes: 1

Views: 88

Answers (2)

hank
hank

Reputation: 3768

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

Upvotes: 4

Fabio
Fabio

Reputation: 23510

You just need to put <img> tag inside <div> tag as follow:

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

Upvotes: 1

Related Questions