Menambahkan gambar latar belakang ke elemen <div>

170

Apakah mungkin untuk membuat <div>elemen berisi gambar latar belakang, dan jika demikian, bagaimana cara saya melakukan ini?

html Sandeep
sumber

Jawaban:

204

Maksudmu ini?

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

...

<div class="bgimg">
    div with background
</div>
phoibos
sumber
dapatkah saya mengaturnya agar tidak dapat diulang?
Valentino Ru
12
ya: background-repeat: no-repeat; w3schools.com/cssref/pr_background-repeat.asp
Matt Becker
42

Anda dapat melakukannya dengan menggunakan backgroundproposisi CSS . Ada beberapa cara untuk melakukannya:

Dengan ID

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

CSS :

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

Menurut Kelas

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

CSS :

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

Dalam HTML (yang jahat)

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

Dimana :

  • warna adalah warna dalam hex atau satu dari Warna X11
  • path adalah path ke gambar
  • yang lain menyukai posisi, kelekatan

background Properti CSS adalah koneksi dari semua propieties background-xxx dalam sintaks itu:

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

Sumber: w3schools

Robik
sumber
Saya ingin menggunakan metode HTML, tetapi apakah mungkin, dengan hanya menggunakan metode itu, untuk menambahkan 2 gambar yang berbeda letaknya. Saya tahu adalah mungkin untuk melakukan sesuatu seperti: background-image: url ("image.jpg"), url ("image2"); tetapi melakukan ini, kedua gambar akan berada di tempat yang sama, agak "saling overlay", dan saya ingin mengatur posisi yang berbeda untuk mereka.
PaulP1
32

Ya :

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

Gunakan gaya ini untuk mendapatkan gambar latar belakang terpusat tanpa mengulangi.

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

Di HTML, setel gaya ini untuk div Anda:

<div class="bgImgCenter"></div>
jegadeesh
sumber
10

Gunakan seperti ..

<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
sumber
Tentunya jalan harus dalam tanda kutip tunggal ??
Shane G
7

Anda cukup menambahkan Atribut img src dengan id:

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

dan di file CSS Anda (stretch background):

#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
sumber
2
Pertanyaannya adalah tentang menambahkan elemen latar belakang ke div, bukan menambahkan atribut img yang terpisah sehingga ini tidak memberikan jawaban untuk pertanyaan itu.
Dipen Shah
3
Meskipun solusi ini tidak menjawab pertanyaan dengan benar, itu memberi saya ide untuk masalah lain yang saya hadapi sehingga untuk itu saya mengucapkan terima kasih.
Striker
6 
<div class="foo">Foo Bar</div>

dan di file CSS Anda:

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

Kita perlu menambahkan konten di bawah ini di tag Style:

.imgg(

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

)
Guvaliour
sumber
Jalur lokal Anda: C: \ Users \ ajai \ Desktop \ 10.jpg tidak akan pernah berfungsi secara online;)
AlmostPitt
Hanya untuk berjabatlah aku memberikan jalan ini
Guvaliour
0

Sebagian besar, metode ini sama dengan mengatur seluruh tubuh

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

</style>

<div class="divi"></div>
Winston Brown
sumber