CSS: Displaying parent background image over the child background image

Question

In my example http://jsfiddle.net/cXbMb/ I need the logo image to be displayed fully, i.e. the header image have to be partially overdrawn. There is also next requirement: the header image have to begin 5px bellow the headline.

<!DOCTYPE html>
<html><head></head>
<body>
    <header>
        <h1>Headline</h1>
        <div></div>
    </header>
</body>
</html>

body { padding: 0; margin: 0 auto; width: 400px; }
header {
    background-image: url('http://placehold.it/100x50/ffff00&text=LOGO');
    background-position: left top;
    background-repeat: no-repeat;
}
header h1 { text-align: right; margin: 0 0 5px; padding: 0; font-size: 1em; }
header div {
    background-image: url('http://placehold.it/400x100/0000ff&text=HEADER');
    background-position: left top;
    background-repeat: no-repeat;
    height:200px;
}

Sounds like you need `z-index`. – Spudley May 05 '13 at 20:40 — Spudley, May 05 '13 at 20:40

score 3 · Accepted Answer · answered May 05 '13 at 20:49

To solve it in the way you're outlining you should create the logo as its own element, and use z-index. Like so: http://jsfiddle.net/fzUtb/1/

<!DOCTYPE html>
<body>
    <header>
        <div class="logo"></div>
        <h1>Headline</h1>
        <div></div>
    </header>
</body>

and the new styles are like:

header{position:relative;}
.logo { background-image: url('http://placehold.it/100x50/ffff00&text=LOGO'); background-position: left top; background-repeat: no-repeat;position:absolute;z-index:2;width:100px;height:50px; }

It may be hair-splitting, but I would recommend that the logo not be a CSS image! CSS is about style, but this logo is real content, so I believe semantically an HTML element makes more sense. This way it will print (CSS backgrounds don't print), and it can have ALT text for screen readers and Google!

score 1 · Answer 2 · answered May 05 '13 at 20:51

I think the only way you're going to get the logo image to display on top of the header, is by moving it out into another child element. You don't need additional markup for that though - you can just user the :after pseudo-element.

header {
    position:relative;
}
header:after {
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-image: url('http://placehold.it/100x50/ffff00&text=LOGO');
    background-position: left top;
    background-repeat: no-repeat; 
}

CSS: Displaying parent background image over the child background image

2 Answers2