Saya ingin mengatur gambar latar belakang ke div yang berbeda, tetapi masalah saya adalah:

1. Ukuran gambar tetap (60px).
2. Memvariasikan ukuran div

Bagaimana saya bisa meregangkan gambar latar belakang untuk mengisi seluruh latar belakang div?

#div2{
  background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
  height:180px;
  width:200px;
  border: 1px solid red;
}

Cek kodenya di sini.

Menambahkan

background-size:100% 100%;

ke css Anda di bawah gambar latar belakang.

Anda juga dapat menentukan dimensi yang tepat, yaitu:

background-size: 30px 40px;

Di sini: JSFiddle

Kamu bisa memakai:

background-size: cover;

Atau gunakan saja gambar latar yang besar dengan:

background: url('../images/teaser.jpg') no-repeat center #eee;

CSS3 modern (direkomendasikan untuk masa depan & mungkin solusi terbaik)

.selector{
   background-size: cover;
   /* stretches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

Max. meregang tanpa pemangkasan atau deformasi (mungkin tidak memenuhi latar belakang) : background-size: contain;
Peregangan mutlak paksa (dapat menyebabkan deformasi, tetapi tidak ada pemangkasan) : background-size: 100% 100%;

"Old" CSS "selalu berfungsi"

Gambar pemosisian absolut sebagai anak pertama dari induk (posisi relatif) dan membentangkannya ke ukuran induk.

HTML

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

Setara dengan CSS3 background-size: cover;:

Untuk mencapai ini secara dinamis, Anda harus menggunakan kebalikan dari alternatif metode berisi (lihat di bawah) dan jika Anda perlu memusatkan gambar yang dipotong, Anda akan memerlukan JavaScript untuk melakukannya secara dinamis - misalnya menggunakan jQuery:

$('.selector img').each(function(){ 
   $(this).css({ 
      "left": "50%", 
      "margin-left": "-"+( $(this).width()/2 )+"px", 
      "top": "50%", 
      "margin-top": "-"+( $(this).height()/2 )+"px" 
   }); 
});

Contoh praktis:

Setara dengan CSS3 background-size: contain;:

Yang ini bisa sedikit rumit - dimensi latar belakang Anda yang akan meluap-luap induknya akan memiliki CSS yang disetel ke 100% yang lainnya ke otomatis. Contoh praktis:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto; 
      height: 100%; */
}

Setara dengan CSS3 background-size: 100% 100%;:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

NB: Untuk melakukan persamaan sampul / penampung dengan cara "lama" sepenuhnya secara dinamis (sehingga Anda tidak perlu peduli dengan luapan / rasio), Anda harus menggunakan javascript untuk mendeteksi rasio untuk Anda dan menyetel dimensi seperti yang dijelaskan. ..

Untuk ini, Anda dapat menggunakan background-sizeproperti CSS3 . Tulis seperti ini:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

Periksa ini: http://jsfiddle.net/qdzaw/1/

Anda dapat menambahkan:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

Anda dapat membaca lebih lanjut tentang itu di sini: css3 background-size

body{
  margin:0;
  background:url('image.png') no-repeat 50% 50% fixed;
  background-size: cover;
}

dengan menggunakan properti css:

background-size: cover;

Gunakan: background-size: 100% 100%; Untuk membuat gambar latar belakang agar sesuai dengan ukuran div.

Untuk menjaga rasio aspek, gunakan background-size: 100% auto;

div {
    background-image: url('image.jpg');
    background-size: 100% auto;
    width: 150px;
    height: 300px;
}

Coba sesuatu seperti ini:

div {
    background-image: url(../img/picture1.jpg);
    height: 30em;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
}