Bagaimana cara meregangkan gambar latar untuk menutupi seluruh elemen HTML?


89

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.


Tentu saja, Anda dapat menggunakan JavaScript untuk melakukan ini secara dinamis, tapi itu mungkin lebih buruk daripada peretasan CSS yang disarankan oleh tautan gabriel1836.
Jason Bunting

Untuk mempertahankan rasio aspek gambar, Anda harus menggunakan "background-size: cover;" atau "background-size: mengandung;". Saya telah membuat polyfill yang mengimplementasikan nilai-nilai tersebut di IE8: github.com/louisremi/background-size-polyfill
Louis-Rémi

Jawaban:


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

Ini juga berfungsi sebagai tag gaya dalam elemen html atau di file css.
Nathan

2
ini adalah solusi terbaik yang pernah ada.
AFD

1
Apa perbedaan antara cover vs 100% 100%?
Pacerier

4
100% 100% tidak menjaga rasio aspek dari gambar aslinya. 'sampul' menskalakan gambar, sambil mempertahankan rasio aspek intrinsiknya (jika ada), ke ukuran terkecil sehingga lebar dan tingginya dapat sepenuhnya menutupi area pemosisian latar belakang. Anda juga dapat menggunakan 'berisi' untuk menskalakan gambar, sambil mempertahankan rasio aspek intrinsiknya (jika ada), ke ukuran terbesar sehingga lebar dan tingginya dapat masuk ke dalam area pemosisian latar belakang.
Mike737

"-webkit-background-size: cover;" bukan properti CSS3 yang valid.
VoidKing


9

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.


Bagi mereka yang TIDAK ingin menjaga rasio aspek!
BillyNair

6

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


1
Saya melihat teknik ini beraksi setidaknya satu dekade lalu. Saya tidak bisa membayangkan itu tidak akan berfungsi sekarang.
Kelopak mata

5

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

4

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

3

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

3

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

3
Anda membutuhkanbackground-size: 100% 100%;
Sablefoste

Saya tidak tahu browser apa yang Anda gunakan, Tapi yang saya katakan berfungsi untuk saya di Firefox dan Chrome.
Badar

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

0

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.


0

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

2
Selamat datang di SO! Untuk menulis jawaban yang lebih baik, tambahkan beberapa alasan mengapa itu berhasil dan tunjukkan kode dalam tindakan. Anda juga bisa membaca tentang menulis jawaban yang bagus .
displacedtexan

0

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:

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


-1

Ini bekerja untuk saya

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.