Using css for images

I am trying to attach an image to a div tag.

<div class="arrow"></div>

.left div.arro开发者_高级运维w{background-image: url(../images/design/arrow.jpg); float:left;}

Nothing is showing on the html page using this. Am I doing it right? I have the image in the correct folder.

Thanks

You will have to set the width and height properties of the DIV, otherwise the DIV is basically invisible since it has no content. Set width&height to the dimension of the background image.

edit: as others have pointed out. Your selector suggests that your target div is inside an element with class "left". If that is not the case, your selector will not work.

When you do this:

.left div.arrow{background-image: url(../images/design/arrow.jpg)

It will work only if the div is inside an element with class of left.

You can target it directly with this:

div.arrow{background-image: url(../images/design/arrow.jpg)

Make sure that:

• You specify width and/or height in the CSS too

• You specify the correct path to the image

  div.arrow{ background-image: url(../images/design/arrow.jpg); width:200px; height:200px; }

.left div.arrow{background-image: url(../images/design/arrow.jpg); float:left;}

This suggests that div having class arrow should be contained within element having class left. Is this the case ?

You might want to change it to

div.arrow{background-image: url(../images/design/arrow.jpg); float:left;}

If you want the div to display when it is empty, you have to specify a width and height for it in the CSS.

The div has no size, therefore it won't show. Either specify a size or add some content to your div.

div.arrow{background-image: url(../images/design/arrow.jpg); float:left; width:100px; height:100px;}