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

170

Est-il possible de faire en sorte qu'un <div>élément contienne une image d'arrière-plan, et si oui, comment dois-je procéder?

html Sandeep
la source

Réponses:

205

Tu veux dire ça?

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

...

<div class="bgimg">
    div with background
</div>
phoibos
la source
puis-je le définir comme non répétable?
Valentino Ru
12
oui: répétition de fond: non-répétition; w3schools.com/cssref/pr_background-repeat.asp
Matt Becker
42

Vous pouvez le faire en utilisant les backgroundpropriétés de CSS . 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 (ce qui est mal)

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

Où :

  • la couleur est la couleur hexadécimale ou l'une des couleurs X11
  • le chemin est le chemin vers l'image
  • d'autres comme la position, l'attachement

background La propriété CSS est une connexion de toutes les propriétés background-xxx dans cette syntaxe:

background : background-color background-image background-repeat background-attachment background-position ;

Source: w3schools

Robik
la source
Je veux utiliser la méthode HTML, mais est-il possible, en utilisant uniquement cette méthode, d'ajouter 2 images qui sont situées différemment. Je sais qu'il est possible de faire quelque chose comme: background-image: url ("image.jpg"), url ("image2"); mais en faisant cela, les deux images seront au même endroit, un peu "se superposant", et je veux leur définir des positions différentes.
PaulP1
32

Oui :

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

Utilisez ce style pour obtenir une image d'arrière-plan centrée sans répétition.

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

En HTML, définissez ce style pour votre div:

<div class="bgImgCenter"></div>
jegadeesh
la source
10

Utilisez 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>
Anand Thangappan
la source
Le chemin doit sûrement être entre guillemets simples ??
Shane G
7

Vous pouvez simplement ajouter un attribut img src avec id:

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

et dans votre fichier CSS (arrière-plan extensible):

#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
la source
2
La question concerne l'ajout d'un élément d'arrière-plan à un div, et non l'ajout d'un attribut img séparé, ce qui ne fournit pas de réponse à la question.
Dipen Shah
3
Bien que cette solution ne réponde pas correctement à la question, elle m'a donné une idée d'un autre problème auquel je faisais face, je vous en remercie donc.
Striker
6 
<div class="foo">Foo Bar</div>

et dans votre fichier CSS:

.foo {
    background-image: url("images/foo.png");
}
Darin Dimitrov
la source
2 
<div id="imgg">Example to have Background Image</div>

Nous devons ajouter le contenu ci-dessous dans la balise Style:

.imgg(

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

)
Guvaliour
la source
Votre chemin local: C: \ Users \ ajai \ Desktop \ 10.jpg ne fonctionnera jamais en ligne;)
AlmostPitt
Juste pour secouer je donne ce chemin
Guvaliour
0

Pour la plupart, la méthode est la même que le réglage du corps entier

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

</style>

<div class="divi"></div>
Winston Brown
la source