Добавление фонового изображения к элементу <div>

170

Можно ли сделать <div>элемент, содержащий фоновое изображение, и если да, то как мне это сделать?

html

— Sandeep
источник

205

Вы имеете в виду это?

<style type="text/css">
.bgimg {
    background-image: url('../images/divbg.png');
}
</style>

...

<div class="bgimg">
    div with background
</div>

— Phoibos
источник

я могу установить его неповторяемым?

— Валентино Ру

12

да: повторение фона: повторение нет; w3schools.com/cssref/pr_background-repeat.asp

— Мэтт Беккер,

42

Вы можете сделать это, используя возможности CSS background. Есть несколько способов сделать это:

По идентификатору

HTML: <div id="div-with-bg"></div>

CSS :

#div-with-bg
{
    background: color url('path') others;
}

По классу

HTML: <div class="div-with-bg"></div>

CSS :

.div-with-bg
{
    background: color url('path') others;
}

В HTML (что зло)

HTML: <div style="background: color url('path')"></div>

Где :

color is color in hex или один из цветов X11
путь это путь к изображению
другим нравится позиция, прикрепление

background Свойство CSS - это соединение всех свойств background-xxx в этом синтаксисе:

background : background-color background-image background-repeat background-attachment background-position ;

Источник: w3schools

— Робик
источник

Я хочу использовать метод HTML, но возможно ли, используя только этот метод, добавить 2 изображения, которые расположены по-разному. Я знаю, что можно сделать что-то вроде: background-image: url ("image.jpg"), url ("image2"); но при этом оба изображения будут находиться в одном и том же месте, как бы «перекрывая» друг друга, и я хочу установить для них разные позиции.

— PaulP1

32

Да :

<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>

— вспышка
источник

14

Используйте этот стиль, чтобы получить центрированное фоновое изображение без повторения.

.bgImgCenter{
    background-image: url('imagePath');
    background-repeat: no-repeat;
    background-position: center; 
    position: relative;
}

В HTML установите этот стиль для вашего div:

<div class="bgImgCenter"></div>

— jegadeesh
источник

10

Используйте как ..

<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>

— Ананд Тангаппан
источник

Наверняка путь должен быть в одинарных кавычках ??

— Шейн Г

7

Вы можете просто добавить атрибут img src с id:

<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>

и в вашем файле CSS (растянуть фон):

#backgroundimage
{
   height: auto;
   left: 0;
   margin: 0;
   min-height: 100%;
   min-width: 674px;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: -1;
}

— Адам Сэндлер
источник

2

Вопрос в том, чтобы добавить элемент div в div, а не добавлять отдельный атрибут img, поэтому это не дает ответа на вопрос.

— Дипен Шах

3

Хотя это решение не дает правильного ответа на вопрос, оно дало мне представление о другой проблеме, с которой я столкнулся, поэтому я выражаю свою благодарность.

— Нападающий

6

<div class="foo">Foo Bar</div>

и в вашем файле CSS:

.foo {
    background-image: url("images/foo.png");
}

— Дарин димитров
источник

2

<div id="imgg">Example to have Background Image</div>

Нам нужно добавить содержимое ниже в теге стиля:

.imgg(

   background-image: url('C:\Users\ajai\Desktop\10.jpg');

)

— Guvaliour
источник

Ваш локальный путь: C: \ Users \ ajai \ Desktop \ 10.jpg никогда не будет работать в сети;)

— Почти Питт

Просто для

— шока

0

По большей части, метод такой же, как установка всего тела

.divi{
    background-image: url('path');
}

</style>

<div class="divi"></div>

— Уинстон Браун
источник