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

Question

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 whole image is if I add almost 170px of padding around the image. Someone please help!

Thanks.

Solution 1

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/

Solution 2

Put Height and width in your css class.

Please view demo here

Solution 3

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

Comments

[Admin]

Thank you. I think I'm just overly tired. I can't believe I missed the bracket :\

[Quentin]

There is no such thing as a "css class", that is a rule set (which doesn't even have a class selector). Classes are an HTML concept, not a CSS one.