Dodanie obrazu tła do elementu <div>

170

Czy jest możliwe, aby <div>element zawierał obraz tła, a jeśli tak, jak mam się do tego zabrać?

html

— Sandeep
źródło

204

Masz na myśli to?

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

...

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

— phoibos
źródło

czy mogę ustawić to jako niepowtarzalne?

— Valentino Ru

12

tak: powtarzanie tła: nie powtarzanie; w3schools.com/cssref/pr_background-repeat.asp

— Matt Becker

42

Możesz to zrobić używając backgroundwłaściwości CSS . Można to zrobić na kilka sposobów:

Według ID

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

CSS :

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

Według klasy

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

CSS :

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

W HTML (co jest złe)

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

Gdzie :

kolor to kolor szesnastkowy lub jeden z kolorów X11
ścieżka to ścieżka do obrazu
inne lubią pozycję, przywiązanie

background Właściwość CSS jest połączeniem wszystkich właściwości background-xxx w tej składni:

background : background-color background-image tło-powtórzenie tła-załącznik pozycja-tła ;

Źródło: w3schools

— Robik
źródło

Chcę użyć metody HTML, ale czy jest możliwe, używając tylko tej metody, dodać 2 obrazy, które są inaczej położone. Wiem, że można zrobić coś takiego: background-image: url ("image.jpg"), url ("image2"); ale robiąc to, oba obrazy będą w tym samym miejscu, trochę „nakładając się” na siebie, i chcę ustawić dla nich różne pozycje.

— PaulP1

32

Tak :

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

— Lampa błyskowa
źródło

14

Użyj tego stylu, aby uzyskać wyśrodkowany obraz tła bez powtórzeń.

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

W HTML ustaw ten styl dla swojego div:

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

— jegadeesh
źródło

10

Użyj jak ...

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

— Anand Thangappan
źródło

Z pewnością ścieżka powinna być w apostrofach?

— Shane G

7

Możesz po prostu dodać atrybut img src z id:

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

oraz w swoim pliku CSS (rozciągnięte tło):

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

— Adam Sandler
źródło

2

Pytanie dotyczy dodania elementu tła do elementu div, a nie osobnego atrybutu img, więc nie daje to odpowiedzi na pytanie.

— Dipen Shah

3

Chociaż to rozwiązanie nie odpowiada poprawnie na pytanie, dało mi pomysł na inny problem, z którym miałem do czynienia, za co dziękuję.

— Striker

6

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

aw pliku CSS:

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

— Darin Dimitrov
źródło

2

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

Musimy dodać poniższą zawartość do tagu Style:

.imgg(

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

)

— Guvaliour
źródło

Twoja lokalna ścieżka: C: \ Users \ ajai \ Desktop \ 10.jpg nigdy nie będzie działać online;)

— AlmostPitt

Na

— wszelki wypadek

0

W większości metoda jest taka sama, jak ustawienie całego ciała

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

</style>

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

— Winston Brown
źródło