Ajout d'une image d'arrière-plan à un élément <div>.

Question

Est-il possible de faire un <div> contient-il une image d'arrière-plan, et si oui, comment dois-je m'y prendre ?

Answer 1

Vous voulez dire ceci ?

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

...

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

Answer 2

Vous pouvez le faire en utilisant la fonction background propriétés. Il y a plusieurs façons de le faire :

---

Par ID

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

CSS :

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

---

Par classe

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

CSS :

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

---

En HTML (qui est diabolique)

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

---

Où :

• couleur est la couleur en hexadécimal ou une des couleurs suivantes Couleurs X11
• chemin est le chemin d'accès à l'image
• autres comme la position, l'attachement

---

background La propriété CSS est une connexion de toutes les propriétés d'arrière-plan-xxx dans cette syntaxe :

arrière-plan : couleur de fond image de fond Répétition de l'arrière-plan arrière-plan-attachement Position de l'arrière-plan ;

Source : w3schools

Answer 3

Oui :

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

Answer 4

Utiliser comme .

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

Answer 5

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

et dans votre fichier CSS :

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