Een achtergrondafbeelding toevoegen aan A & LT; DIV & GT; element

Is het mogelijk om een ​​<div>-element bevat een achtergrondafbeelding, en zo ja, hoe zou ik dit doen?


Antwoord 1, Autoriteit 100%

Bedoel je dit?

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

Antwoord 2, Autoriteit 20%

U kunt dat doen met CSS’s backgroundproperties. Er zijn weinig manieren om het te doen:


per id

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

CSS :

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

per klas

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

CSS :

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

in HTML (die slecht is)

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


waar :

  • Kleur is kleur in hex of een van x11 kleuren
  • pad is pad naar de afbeelding
  • ANDEREN NAAST POSITION, ADLAATHTAMENT

backgroundCSS-onroerend goed is een verbinding van alle achtergrond-XXX-properties in die syntaxis:

achtergrond:
achtergrondkleur
achtergrondafbeelding
achtergrondherhaling
achtergrondbijlage
achtergrondpositie;

Bron: w3schools


Antwoord 3, autoriteit 16%

Ja:

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

Antwoord 4, autoriteit 8%

Gebruik deze stijl om een gecentreerde achtergrondafbeelding te krijgen zonder herhaling.

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

Stel in HTML deze stijl in voor uw div:

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

Antwoord 5, autoriteit 5%

Gebruik als ..

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

Antwoord 6, autoriteit 4%

Je kunt eenvoudig een img src-kenmerk toevoegen met id:

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

en in uw CSS-bestand (stretch achtergrond):

#backgroundimage
{
   height: auto;
   left: 0;
   margin: 0;
   min-height: 100%;
   min-width: 674px;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: -1;
}

Antwoord 7, Autoriteit 3%

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

en in uw CSS-bestand:

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

Antwoord 8

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

We moeten de onderstaande inhoud toevoegen aan stijltag:

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

Antwoord 9

Voor het grootste deel is de methode hetzelfde als het instellen van het hele lichaam

.divi{
    background-image: url('path');
}
</style>
<div class="divi"></div>

Other episodes