CODEWITHSUNDEEP
css
Satch3000
Satch3000

Reputation: 49384

CSS Background image not showing

I have a background image that I want to show in a div floated right.

Here is the css

<style>
.myclass {
background-image: url('images/myimage.png') no-repeat 0 0;
float:right;
background-size:80px 80px;
}
</style>

Then I have a list:

<ul>
<li>
<div class="myclass">&nbsp;</div>
<p>Hello</p>
</li>
</ul>

For some reason the image is not showing at all.

Upvotes: 0

Views: 211

Answers (5)

Akash Soti
Akash Soti

Reputation: 583

You can also write it like this

.myclass{
    background: url('images/myimage.png');
    background-repeat: no-repeat;
    height: 150px;
    width: 200px;
}

you have to give it certain properties regarding it's height and width otherwise it won't show. One suggestion is this, that you check out the dimensions of you image in the folder and define the size accordingly in height and width. Good luck!

Upvotes: 2

j08691
j08691

Reputation: 207861

You're using the background-image selector but using it as if it were the shorthand background rule.

Use: background: url('images/myimage.png') no-repeat 0 0;

You'll also need to specify a width and height to the div as the float collapses it and the &nbsp; will only give it a marginal height and width.

jsFiddle example

Upvotes: 4

Tabetha Moe
Tabetha Moe

Reputation: 116

background:url('img_tree.png') right no-repeat;

Upvotes: 1

ttran4040
ttran4040

Reputation: 170

It may be your folder path.. have you tried ../images/?

Upvotes: 0

Cory Danielson
Cory Danielson

Reputation: 14501

Instead of background-image use background for your CSS attribute.

http://www.dustindiaz.com/css-shorthand/

You may also need to add a background-color before the url() property.

Upvotes: 1

Related Questions