Bir <div> öğesine arka plan görüntüsü ekleme

170

Bir <div>öğenin arka plan görüntüsü içermesini sağlamak mümkün mü , eğer öyleyse bunu nasıl yapabilirim?

html

— Sandeep
kaynak

204

Bunu mu demek istiyorsun?

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

...

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

— Phoibos
kaynak

tekrarlanamaz olarak ayarlayabilir miyim?

— Valentino Ru

12

evet: arkaplan tekrarlama: hayır tekrarlama; w3schools.com/cssref/pr_background-repeat.asp

— Matt Becker

42

Bunu CSS'nin özelliklerini kullanarak backgroundyapabilirsiniz. Bunu yapmanın birkaç yolu vardır:

Kimliğe göre

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

CSS :

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

Sınıfa Göre

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

CSS :

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

HTML'de (kötü olan)

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

Nerede :

renk altıgen veya X11 Renklerinden bir renktir
yol görüntünün yoludur
diğerleri konum, ilişki gibi

background CSS Özelliği, sözdizimindeki tüm background-xxx özelliklerinin bir bağlantısıdır:

arka plan : arka plan rengi arka plan görüntüsü arka plan tekrarlama arka plan eki arka plan konumu ;

Kaynak: w3schools

— Robik
kaynak

HTML yöntemini kullanmak istiyorum, ancak yalnızca bu yöntemi kullanarak, farklı konumlarda 2 görüntü eklemek mümkün mü? Bunun gibi bir şey yapmak mümkün olduğunu biliyorum: background-image: url ("image.jpg"), url ("image2"); ama bunu yaparken, her iki görüntü de aynı yerde olacak, birbirlerini "kaplayacak" ve onlar için farklı pozisyonlar ayarlamak istiyorum.

— PaulP1

32

Evet :

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

— flaş
kaynak

14

Tekrarlamadan ortalanmış bir arka plan görüntüsü almak için bu stili kullanın.

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

HTML'de div'iniz için bu stili ayarlayın:

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

— Jegadeesh
kaynak

10

Gibi kullanın ..

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

Elbette yol tek tırnak içinde olmalıdır ??

— Shane G

7

Kimliğine sahip bir img src Özniteliği ekleyebilirsiniz:

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

ve CSS dosyanızda (arka planı genişlet):

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

2

Soru, div'a bir arka plan öğesi eklemek, ayrı bir img niteliği eklememekle ilgilidir, böylece bu soruya bir cevap vermez.

— Dipen Shah

3

Bu çözüm soruyu doğru bir şekilde cevaplamasa da, karşılaştığım başka bir sorun için bana bir fikir verdi, bu yüzden teşekkür ederim.

— Forvet

6

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

ve CSS dosyanızda:

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

— Darin Dimitrov
kaynak

2

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

Stil etiketinde aşağıdaki içeriği eklememiz gerekiyor:

.imgg(

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

)

— Guvaliour
kaynak

Yerel yolunuz: C: \ Users \ ajai \ Desktop \ 10.jpg asla çevrimiçi çalışmayacak;)

— AlmostPitt

Sadece sarsıntı için ben bu yolu vermek

— Guvaliour

0

Çoğunlukla, yöntem tüm vücudu ayarlamakla aynıdır

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

</style>

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

— Winston Brown
kaynak