Bir arka plan resmini tüm HTML öğesini kaplayacak şekilde nasıl uzatırım?

Tüm genişliğini ve yüksekliğini uzatmak için bir HTML öğesinin (gövde, div, vb.) Arka plan görüntüsünü almaya çalışıyorum.

Pek şansım yok. Mümkün mü yoksa arka plan görüntüsü olmanın dışında başka bir yolla mı yapmalıyım?

Mevcut css'im:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

Şimdiden teşekkürler.

Düzenleme: Cebrail'in önerisinde CSS'yi korumaya istekli değilim, bu yüzden bunun yerine sayfanın düzenini değiştiriyorum. Ama bu en iyi cevap gibi görünüyor, ben de öyle işaretliyorum.

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

background-sizeÖzelliği kullanın : http://www.w3.org/TR/css3-background/#the-background-size

Kısacası şunu deneyebilirsiniz ...

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Birkaç css ve js kullandığım yerde ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

Ve benim için iyi çalışıyor.

Bir arka plan resmini uzatmanın mümkün olduğundan emin değilim. Tüm hedef tarayıcılarınızda bunun mümkün olmadığını veya güvenilir olmadığını fark ederseniz, z-endeksi daha düşük ve konumu mutlak olarak ayarlanmış uzatılmış bir img etiketi kullanmayı deneyebilirsiniz, böylece üstte diğer içerik görünür.

Ne yaptığınızı bize bildirin.

Düzenleme: Önerdiğim temelde gabriel'in bağlantısında olan şey. Öyleyse dene :)

@PhiLho yanıtını genişletmek için, çok büyük bir resmi (veya herhangi bir boyuttaki resmi) bir sayfada ortalayabilirsiniz:

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Veya görüntünün arka planıyla eşleşen bir arka plan rengine sahip daha küçük bir görüntü de kullanabilirsiniz (bu tek renk ise). Bu, amaçlarınıza uygun olabilir veya olmayabilir.

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Ekranı yeniden boyutlandırırken arka plan resminizi uzatmanız gerekiyorsa ve daha eski tarayıcı sürümleriyle uyumluluğa ihtiyacınız yoksa bu işi yapacaktır:

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Büyük bir yatay görüntünüz varsa, buradaki bu örnek arka planı dikey modda yeniden boyutlandırır, böylece üstte görüntülenir ve altta boş bırakılır:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

İstenen etkiyi elde etmek için çoğunlukla kullandığım aşağıdaki kod:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Saf CSS'de yapamazsınız. Diğer tüm bileşenlerin ardında tüm sayfayı kaplayan bir görüntünün olması muhtemelen en iyi seçeneğinizdir (yukarıda verilen çözüm bu gibi görünüyor). Her neyse, şanslar yine de berbat görünecek. Ya sayfanın genişliğini sınırlamak için çoğu ekran çözünürlüğünü kaplayacak kadar büyük bir görüntüyü (örneğin 1600x1200'e kadar, üstü daha azdır), ya da sadece döşenen bir görüntüyü kullanmayı denerdim.

image {

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 

Gövdedeki diğer tüm öğeleri kapsayan, gövdenin doğrudan alt öğesi (örneğin bg sınıf adıyla) olacak şekilde bir div oluşturun ve bunu CSS dosyasına ekleyin:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

Şu bağlantıya bakın: https://www.w3schools.com/css/css_rwd_images.asp Aşağıdaki yazan kısma ilerleyin:

2. Arka plan boyutu özelliği "% 100% 100" olarak ayarlanırsa, arka plan resmi tüm içerik alanını kaplayacak şekilde genişler

Burada, nasıl yeniden boyutlandırdığınıza bakılmaksızın ekranın veya tarayıcının boyutuna uzanan 'img_flowers.jpg' dosyasını gösterir.

Benim için çalışıyor

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}