Cant get the pseudo class before to work

Question

So here's what I'm trying to do,

I want to add a top background strip(of height 30px) just like how stackoverflow has using the pseudo class before. I know this can be done easily without it but I'm interested to know if it can be accomplished using the :before pseudo class.

Here's my code,

<div class="container">
//Other divs
</div>

And here's the css I'm using,

.container:before {
content: " ";
background-image:url(../images/head-bg.jpg);
background-repeat:repeat-x;
min-height:30px;
}

I read somewhere that content: " "; needs to be added for the pseudo class to work so I've added it with nothing in the quotes.

I've tried removing all the background code from the css and adding text within content quotes and it works. However, when I add the code for the background it doesn't.

I'll be grateful if anyone could point out the mistake I am doing with this.

Thanks for your time.

Answer 1

You should set the width of .container to whatever you need it to be. You should probably also use height instead of min-height. The :before and :after pseudo elements are also display:inline by default, so in order for height and width to be applied you'll need to change display.

Demo

.container:before {
    content: "";
    background-image:url(../images/head-bg.jpg);
    background-repeat:repeat-x;
    height:30px;
    width:30px;
    display:inline-block;
}

Also you can just use the empty string with content.