Aggiunta di un'immagine di sfondo a un elemento <div>

170

È possibile fare in modo che un <div>elemento contenga un'immagine di sfondo e, in caso affermativo, come farei per farlo?

html

— Sandeep
fonte

204

Intendi questo?

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

...

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

— PHOIBOS
fonte

posso impostarlo non ripetibile?

— Valentino Ru,

12

sì: ripetizione in background: nessuna ripetizione; w3schools.com/cssref/pr_background-repeat.asp

— Matt Becker

42

Puoi farlo usando le backgroundpropietà CSS . Ci sono alcuni modi per farlo:

Per ID

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

CSS :

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

Per classe

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

CSS :

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

In HTML (che è male)

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

Dove :

il colore è il colore in esadecimale o uno da X11 Colori
il percorso è il percorso dell'immagine
altri come posizione, attachament

background La proprietà CSS è una connessione di tutte le propietà background-xxx in quella sintassi:

sfondo : sfondo-colore sfondo-immagine sfondo-ripetizione sfondo-allegato sfondo-posizione ;

Fonte: w3schools

— Robik
fonte

Voglio usare il metodo HTML, ma è possibile, usando solo quel metodo, aggiungere 2 immagini che si trovano in modo diverso. So che è possibile fare qualcosa del tipo: background-image: url ("image.jpg"), url ("image2"); ma facendo questo, entrambe le immagini saranno nello stesso posto, un po '"sovrapponendosi" a vicenda, e voglio impostare posizioni diverse per loro.

— PaulP1

32

Sì :

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

— Veloce
fonte

14

Usa questo stile per ottenere un'immagine di sfondo centrata senza ripetizione.

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

In HTML, imposta questo stile per il tuo div:

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

— Jegadeesh
fonte

10

Usa come ..

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

Sicuramente il percorso dovrebbe essere tra virgolette singole ??

— Shane G,

7

Puoi semplicemente aggiungere un attributo img src con id:

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

e nel tuo file CSS (sfondo allungato):

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

2

La domanda riguarda l'aggiunta di un elemento di sfondo a un div, non l'aggiunta di un attributo img separato, quindi questo non fornisce una risposta alla domanda.

— Dipen Shah,

3

Sebbene questa soluzione non risponda correttamente alla domanda, mi ha dato un'idea per un altro problema che stavo affrontando, quindi offro i miei ringraziamenti.

— Attacco

6

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

e nel tuo file CSS:

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

— Darin Dimitrov
fonte

2

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

Dobbiamo aggiungere il contenuto seguente nel tag Style:

.imgg(

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

)

— Guvaliour
fonte

Il tuo percorso locale: C: \ Users \ ajai \ Desktop \ 10.jpg non funzionerà mai online;)

— AlmostPitt

Solo per agitare, do questo percorso

— Guvaliour,

0

Per la maggior parte, il metodo è lo stesso di impostare l'intero corpo

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

</style>

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

— Winston Brown
fonte