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

Odpowiedzi:

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