Додавання фонового зображення до елемента <div>

170

Чи можливо зробити так, щоб <div>елемент містив фонове зображення, і якщо так, то як би мені це зробити?

html

204

Ти це маєш на увазі?

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

...

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

— фобій
джерело

чи можу я встановити його, що не повторюється?

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

12

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

— Метт Бекер

42

Це можна зробити, використовуючи backgroundпропекти CSS . Є кілька способів зробити це:

За ідентифікатором

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>

Де :

колір - кольоровий у шістнадцятковій або один із X11 кольорів
шлях - це шлях до образу
іншим подобається посада, прихильність

background Властивість CSS - це з'єднання всіх фонових зображень background-xxx у цьому синтаксисі:

фон : фоновий колір фонового зображення фон-повтор тло-вкладення фон-положення ;

Джерело: w3schools

— Робік
джерело

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

— ПавлоП1

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>

— джеґадеш
джерело

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, не додавання окремого атрибута 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>

Нам потрібно додати наведений нижче вміст у тегу Style:

.imgg(

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

)

— Гувальйора
джерело

Ваш місцевий шлях: C: \ Users \ ajai \ Desktop \ 10.jpg ніколи не буде працювати в Інтернеті;)

— МайжеPitt

Тільки для похитування я даю цей шлях

— Гувальюро

0

Здебільшого метод такий же, як встановлення всього тіла

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

</style>

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

— Вінстон Браун
джерело