Hinzufügen eines Hintergrundbilds zu einem <div> -Element

170

Ist es möglich, dass ein <div>Element ein Hintergrundbild enthält, und wenn ja, wie würde ich vorgehen?

html

— Sandeep
quelle

204

Du meinst das?

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

...

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

— Phoibos
quelle

kann ich es nicht wiederholbar einstellen?

— Valentino Ru

12

ja: Hintergrundwiederholung: nein-Wiederholung; w3schools.com/cssref/pr_background-repeat.asp

— Matt Becker

42

Sie können dies mit den backgroundEigenschaften von CSS tun. Es gibt nur wenige Möglichkeiten:

Nach ID

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

CSS :

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

Nach Klasse

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

CSS :

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

In HTML (was böse ist)

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

Wo :

Farbe ist Farbe in Hex oder eine von X11 Farben
Pfad ist Pfad zum Bild
andere mögen Position, Anhang

background Die CSS-Eigenschaft ist eine Verbindung aller Hintergrund-xxx-Eigenschaften in dieser Syntax:

Hintergrund : Hintergrundfarbe Hintergrundbild Hintergrund-Wiederholung Hintergrund-Anhang Hintergrundposition ;

Quelle: w3schools

— Robik
quelle

Ich möchte die HTML-Methode verwenden, aber es ist möglich, nur mit dieser Methode 2 Bilder hinzuzufügen, die sich unterschiedlich befinden. Ich weiß, dass es möglich ist, etwas zu tun wie: Hintergrundbild: URL ("image.jpg"), URL ("image2"); Dabei befinden sich beide Bilder an derselben Stelle und "überlagern" sich gegenseitig, und ich möchte unterschiedliche Positionen für sie festlegen.

— PaulP1

32

Ja :

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

— Blitz
quelle

14

Verwenden Sie diesen Stil, um ein zentriertes Hintergrundbild ohne Wiederholung zu erhalten.

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

Legen Sie in HTML diesen Stil für Ihr div fest:

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

— jegadeesh
quelle

10

Verwenden Sie wie ..

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

Sicherlich sollte der Pfad in einfachen Anführungszeichen stehen?

— Shane G

7

Sie können einfach ein img src-Attribut mit der ID hinzufügen:

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

und in Ihrer CSS-Datei (Hintergrund strecken):

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

2

Bei der Frage geht es darum, einem div ein Hintergrundelement hinzuzufügen und kein separates img-Attribut hinzuzufügen, sodass dies keine Antwort auf die Frage liefert.

— Dipen Shah

3

Obwohl diese Lösung die Frage nicht richtig beantwortet, gab sie mir eine Idee für ein anderes Problem, mit dem ich konfrontiert war, und dafür danke ich Ihnen.

— Stürmer

6

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

und in Ihrer CSS-Datei:

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

— Darin Dimitrov
quelle

2

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

Wir müssen den folgenden Inhalt im Style-Tag hinzufügen:

.imgg(

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

)

— Guvaliour
quelle

Ihr lokaler Pfad: C: \ Users \ ajai \ Desktop \ 10.jpg wird niemals online funktionieren;)

— AlmostPitt

Nur zum Schütteln gebe ich diesen Weg

— Guvaliour

0

Die Methode entspricht größtenteils der Einstellung des gesamten Körpers

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

</style>

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

— Winston Brown
quelle