CSS Background image not showing

Question

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.

Answer 1

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   will only give it a marginal height and width.

jsFiddle example

Answer 2

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!

Answer 3

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.

Answer 4

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

Answer 5

它可能是您的文件夹路径。.您是否尝试过../images/？