Using css for images

Question

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

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

.left div.arrow{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

Answer 1

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.

Answer 2

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; }

Answer 3

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;}

Answer 4

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

Answer 5

.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;}