Фоновое изображение не будет отображаться в CSS, если я не загружу изображение с помощью тега <img>в HTML

Question

Я очень запутался, почему мой код не отображает изображение должным образом. Вот мой код:

<style type = "text/css">

#pic {

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


</style>

<div id = "pic"> <p>

</p> </div> 

Только крошечная часть изображения отображается вместе с текстом ... Я так растерялся, почему это происходит. Единственный способ отобразить все изображение - добавить почти 170px отступов вокруг изображения. Кто-нибудь, пожалуйста, помогите!

Спасибо.

Answer 1

1. Вам нужна закрывающая скобка перед </style>
2. #pic имеет ширину и высоту ноль, поэтому фон не будет отображаться. Либо поместите содержимое в div, либо установите ширину и высоту.

Проверьте это работает, здесь: http://jsfiddle.net/UzcDM/1/

Answer 2

Укажите высоту и ширину в вашем классе CSS.

Пожалуйста, просмотрите демо здесь

Answer 3

Вам необходимо указать ширину и высоту для div.

Кроме того, убедитесь, что вы закрыли свой CSS:

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

Answer 4

выбирая правильный путь, например, ../../Images/logo/google.png,

попробуйте добавить позицию: абсолютная;

это может быть просто за некоторыми элементами