Bagaimana cara meregangkan gambar latar untuk menutupi seluruh elemen HTML?

Saya mencoba untuk mendapatkan gambar latar belakang dari elemen HTML (body, div, dll.) Untuk meregangkan seluruh lebar dan tingginya.

Tidak beruntung. Apakah mungkin atau saya harus melakukannya dengan cara lain selain itu menjadi gambar latar belakang?

CSS saya saat ini adalah:

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

Terima kasih sebelumnya.

Sunting: Saya tidak tertarik untuk mempertahankan CSS dalam saran Gabriel, jadi saya mengubah tata letak halaman sebagai gantinya. Tapi sepertinya itu jawaban terbaik jadi saya menandainya seperti itu.

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

Gunakan background-sizeproperti: http://www.w3.org/TR/css3-background/#the-background-size

Singkatnya, Anda dapat mencoba ini ....

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

Di mana saya telah menggunakan beberapa css dan js ...

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

Dan itu bekerja dengan baik untuk saya.

Tidak yakin bahwa peregangan gambar latar belakang dimungkinkan. Jika Anda menemukan bahwa itu tidak mungkin, atau tidak dapat diandalkan di semua browser target Anda, Anda dapat mencoba menggunakan tag img yang direntangkan dengan z-index disetel lebih rendah, dan posisi disetel ke absolut sehingga konten lain muncul di atasnya.

Beri tahu kami apa yang akhirnya Anda lakukan.

Edit: Apa yang saya sarankan pada dasarnya adalah apa yang ada di tautan gabriel. Jadi coba itu :)

Untuk memperluas jawaban @PhiLho, Anda dapat memusatkan gambar yang sangat besar (atau gambar ukuran apa pun) pada halaman dengan:

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

Atau Anda dapat menggunakan gambar yang lebih kecil dengan warna latar yang sesuai dengan latar belakang gambar (jika berwarna solid). Ini mungkin sesuai atau tidak sesuai dengan tujuan Anda.

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

Jika Anda perlu meregangkan gambar latar belakang saat mengubah ukuran layar dan Anda tidak memerlukan kompatibilitas dengan versi browser yang lebih lama, ini akan berfungsi:

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

Jika Anda memiliki gambar lanskap besar, contoh di sini mengubah ukuran latar belakang dalam mode potret, sehingga ditampilkan di atas, biarkan kosong di bagian bawah:

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

Kode berikut saya gunakan sebagian besar untuk mencapai efek yang diminta:

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;

Anda tidak bisa menggunakan CSS murni. Memiliki gambar yang menutupi seluruh halaman di belakang semua komponen lain mungkin adalah pilihan terbaik Anda (sepertinya itulah solusi yang diberikan di atas). Bagaimanapun, kemungkinan besar itu akan terlihat mengerikan. Saya akan mencoba gambar yang cukup besar untuk menutupi sebagian besar resolusi layar (katakanlah hingga 1600x1200, di atasnya lebih langka), untuk membatasi lebar halaman, atau hanya menggunakan gambar ubin itu.

gambar{

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

Cukup buat div menjadi turunan langsung dari body (dengan nama kelas bg misalnya), yang mencakup semua elemen lain di body, dan tambahkan ini ke file CSS:

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

Lihat tautan ini: https://www.w3schools.com/css/css_rwd_images.asp Gulir ke bawah ke bagian yang mengatakan:

2. Jika properti ukuran latar belakang disetel ke "100% 100%", gambar latar belakang akan melebar untuk menutupi seluruh area konten

Di sana itu menunjukkan 'img_flowers.jpg' yang membentang ke ukuran layar atau browser terlepas dari bagaimana Anda mengubah ukurannya.

Ini bekerja untuk saya

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