CODEWITHSUNDEEP
htmlcss
dogisdev
dogisdev

Reputation: 47

Trouble with making a button with image on it

I was recently trying to make few colored buttons with image on them.
What would be the best way of making these buttons? I thought styling a li. My guess would be: http://jsfiddle.net/qvgtL8j3/

<ul id="leftsideul">
<li class="button blog"></li>
<li class="button jobs"></li>
<li class="button support"></li>
<li class="button arabic"></li>
</ul>

and:

#leftsideul .button{
    width: 99px;
    height: 32px;
    border-radius: 3px;
    background-color: grey;
}

#leftsideul .blog{
    background-image: url(http://i.imgur.com/g9cwJeh.png) no-repeat;
}

#leftsideul ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#leftsideul li{
    display: inline-block;
}

but the problem is that I can't see those images. What are your thoughts about this?

Upvotes: 1

Views: 52

Answers (2)

Emilly
Emilly

Reputation: 1

Use background instead of background-image Example

#leftsideul .blog{
 height:32px ; 
   background: url('http://i.imgur.com/g9cwJeh.png') center center no-repeat;

}

Upvotes: 0

j08691
j08691

Reputation: 207901

You're using the background-image property but the shorthand background syntax. Change background-image to background:

#leftsideul .blog{
    background: url(http://i.imgur.com/g9cwJeh.png) no-repeat;
}

jsFiddle example

Upvotes: 2

Related Questions