Background Image won't show up in CSS unless I load an image using the <img> tag in HTML

I'm extremely confused why my code won't display the image properly. Here's my code:

<style type = "text/css">

#pic {

background:url('http://www.tishbi.eu/img/shopping_cart.png') no-repeat;


</style>

<div id = "pic"> <p>

</p> </div> 

Only a tiny portion of the image is displayed along with the text... I'm so confused why this is happening. The only way I can display the w开发者_开发技巧hole image is if I add almost 170px of padding around the image. Someone please help!

Thanks.

---

1. You need a closing brace before </style>
2. #pic has a width and height of zero, so the background wont show. Either put content in the div, or set a width and height.

Check it out working, here: http://jsfiddle.net/UzcDM/1/

---

You need to specify a width and height for your div.

Also, make sure you close your CSS:

#pic {
   background:url('http://www.tishbi.eu/img/shopping_cart.png') no-repeat;
   width: 200px;
   height: 300px;
}

---

Put Height and width in your css class.

Please view demo here

---

taking that path set right e.g. ../../Images/logo/google.png,

try adding position:absolute;

it might be simply behind some elements