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

Thanks.

回答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/

回答2:

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

回答3:

Put Height and width in your css class.

Please view demo here

回答4:

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

try adding position:absolute;

it might be simply behind some elements

来源：https://stackoverflow.com/questions/4633409/background-image-wont-show-up-in-css-unless-i-load-an-image-using-the-img-tag