CODEWITHSUNDEEP
htmlcsspseudo-element
Navin Rauniyar
Navin Rauniyar

Reputation: 10525

how to set background-image to pseudo element?

this is the html

<div id="tab-1">

</div>

her is the css

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;

}

demo

How to display background-image? If I use background-color then it works but why not background-image? And even if sometimes works in jsfiddle but not in my localhost.

Upvotes: 0

Views: 1582

Answers (5)

Mr. Alien
Mr. Alien

Reputation: 157284

You must take out the no-repeat from the background-image as you are using a short hand syntax inside background-image property which is not valid, inorder to use short hand syntax, you need to use background property instead

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw");
    background-repeat: no-repeat;
    content: " ";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;
}

Demo (Separating background-repeat if you want to keep background-image)

Demo 2 (CSS Short hand syntax using background property)

Upvotes: 2

Roy M J
Roy M J

Reputation: 6938

Check out : http://jsfiddle.net/6nDKP/4/

Instead of : 

 background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;

Use : 

 background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;

Upvotes: 1

Arbaoui Mehdi
Arbaoui Mehdi

Reputation: 802

Change background-image with background.

#tab-1:before{
    background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;

}

Demo: http://jsfiddle.net/zyuWW/

Upvotes: 0

user2618352
user2618352

Reputation: 114

The reason its not working is that your are including no-repeat in background-image style. Exclude it to background-repeat: no-repeat;. Then it will work fine. Here is the code:-

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;

}

Upvotes: 0

doitlikejustin
doitlikejustin

Reputation: 6353

Separate the no-repeat

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;
}

Fiddle: http://jsfiddle.net/6nDKP/1/

Upvotes: 0

Related Questions