Как использовать изображение в качестве фона div?

Question

В основном у меня есть несколько изображений psd, которые я создал, которые я хочу использовать в качестве фона для разных div на веб-сайте. (Они сохраняются как .pngs и .jpg соответственно). Пример, который я пытаюсь найти, - http://www.brioitalian.com/index.html.

Я использую платформу bootstrap. Каждый раз, когда я пытаюсь сделать это, мой div остается коробкой с изображением внутри нее, а не фактическим изображением, представляющим div. Например, контент-центр сайта Brio имеет разрывы, такие как края.

Я чувствую, что это должно быть довольно просто, но это сводит меня с ума.

Answer 1

Ваша проблема не связана с загрузкой. Скорее, он устанавливает фон для элемента. Я использую следующее в качестве стандартного CSS для добавления фоновых изображений в <div>, <span> или <a> html-теги.

.background{ 
    background-image: url(background.image.png); 
    background-repeat: no-repeat; /* image will appear only once*/ 
    height: 100px; /* height of image */ 
    width: 100px; /* width of image */ 
} 

Однако это основной способ реализации этого. В http://www.w3schools.com/css/css_background.asp есть хороший учебник, в котором показаны различные параметры, которые можно сделать с помощью фоновых изображений.