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
source

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