Image in a div tag

Question

What is the difference between them.The image appears only in the first case.Why doesnt in appear in the second case?

<div id='" + this.panelId + "Icon-1" + "'  style='width:34px;align:center;' class='iconDiv'><img id="+"Img"+ this.panelId+"  src="+"Images/i24_grey-info.png"+" /></div>



<div id='" + this.panelId + "Icon-1" + "'  style='width:34px;align:center; background-image:Images/i24_grey-info.png' class='iconDiv'></div>

Thanks to all . This works! But i get 4 images...i mean the image repeats 4 times :( why is that?

this.iconDiv = "<div id='" + this.panelId + "Icon-1" + "'  style='width:34px;height:34px; align:center;background-image: url(Images/i24x24_info.png);' class='iconDiv'></div>";

Answer 1

Replace

background-image:Images/i24_grey-info.png;

by

background:url('Images/i24_grey-info.png') no-repeat;

I have had similar situations before. Try to use shorthand codes as much as possible.

Answer 2

Your CSS is incorrect. There is no align style, use text-align. Use a colon after background-image, and url() around the image URL:

style='width:34px; text-align:center; background-image:url(Images/i24_grey-info.png)'

You might also have to set the height of the div to the height of the image.

Answer 3

Your css syntax is wrong. Should be:

style='width:34px; align:center; background-image: (Images/i24_grey-info.png)'

The other problem is connected with div height, which is set to 0 on default when there is no content in it. You have to set the height to see the image then:

style='width:34px; height: 50px; align:center; background-image: (Images/i24_grey-info.png)'

Answer 4

in the first line you are passing grey-info.png to img tag however in the second line you are passing it to background-img

Answer 5

Se the height also for the div when using background-image:

<div id='" + this.panelId + "Icon-1" + "'  style='width:34px;height:34px;align:center; background-image='Images/i24_grey-info.png' class='iconDiv'></div>"