Bisakah saya memiliki banyak gambar latar belakang menggunakan CSS?

316

Apakah mungkin memiliki dua gambar latar belakang? Sebagai contoh, saya ingin memiliki satu pengulangan gambar di bagian atas (repeat-x), dan pengulangan lainnya di seluruh halaman (repeat), di mana yang di seluruh halaman berada di belakang yang mengulang di bagian atas.

Saya telah menemukan bahwa saya dapat mencapai efek yang diinginkan untuk dua gambar latar belakang dengan mengatur latar belakang html dan tubuh:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

Apakah ini "baik" CSS? Apakah ada metode yang lebih baik? Dan bagaimana jika saya ingin tiga atau lebih gambar latar belakang?

css background-image Rudd Zwolinski
sumber

Jawaban:

377

CSS3 memungkinkan hal semacam ini dan terlihat seperti ini:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

Versi saat ini dari semua browser utama sekarang mendukungnya , namun jika Anda perlu mendukung IE8 atau lebih rendah, maka cara terbaik Anda dapat mengatasinya adalah memiliki div tambahan:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}
nickf
sumber
27
Berbagai latar belakang didukung oleh versi terbaru Firefox, Chrome, Safari, dan Opera. Ini akan didukung di IE9 juga. en.wikipedia.org/wiki/…
Šime Vidas
4
Dan jika Anda ingin memiliki pengaturan pengulangan / posisi yang berbeda, Anda dapat melakukan ini: css3.info/preview/multiple-backgrounds
Krisc
2
Untuk IE8 - IE6, Anda dapat menggunakan PIE.js. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…
Aleš Kotnik
1
Apakah ukuran latar belakang mengikuti aturan yang sama? Saya ingin semua gambar latar belakang saya menjadi tinggi penuh, kecuali untuk salah satu dari mereka (yang saya ingin menjadi tinggi gambar).
mtmurdock
Ya, ukuran latar belakang mengikuti aturan yang sama (seperti semua properti latar lainnya). Properti latar belakang (biasanya dimulai dengan latar belakang awalan- dan kemudian properti spesifik latar belakang) sebenarnya dapat ditentukan dalam properti latar belakang itu sendiri, jadi karena banyak gambar latar belakang didukung, banyak properti terdaftar juga didukung. Ini berlaku untuk ukuran, posisi, ulangi, dll.
Cannicide
35

Cara termudah yang saya temukan untuk menggunakan dua gambar latar yang berbeda dalam satu div adalah dengan baris kode ini:

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

Jelas, itu tidak harus hanya untuk tubuh situs web, Anda dapat menggunakannya untuk setiap div yang Anda inginkan.

Semoga itu bisa membantu! Ada posting di blog saya yang membicarakan hal ini sedikit lebih mendalam jika ada yang membutuhkan instruksi atau bantuan lebih lanjut - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div .

TheLibzter
sumber
Perhatikan bahwa ini hanya berfungsi dengan latar belakang dan tidak dengan gambar latar belakang
yoel halb
24

Gunakan ini 

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

cara sederhana untuk menyesuaikan Anda setiap posisi gambar dengan posisi latar: dan mengatur properti pengulangan dengan pengulangan latar: untuk setiap gambar secara terpisah

code.rider
sumber
13

Versi FF dan IE saat ini dan beberapa browser lain mendukung banyak gambar latar belakang dalam satu deklarasi CSS2. Lihat di sini http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ dan di sini http://www.quirksmode.org/css/multiple_backgrounds.html dan di sini http: / /nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Untuk IE, Anda mungkin mempertimbangkan untuk menambahkan perilaku. Lihat di sini: http://css3pie.com/

Shannon
sumber
4

Ya, itu mungkin, dan telah diterapkan oleh situs pengujian kegunaan populer Silverback . Jika Anda melihat melalui kode sumber Anda dapat melihat bahwa latar belakang terdiri dari beberapa gambar, ditempatkan di atas satu sama lain.

Berikut adalah artikel yang menunjukkan bagaimana melakukan efeknya dapat ditemukan pada Vitamin . Konsep serupa untuk membungkus lapisan 'kulit bawang' ini dapat ditemukan di A List Apart .

Mike B
sumber
4

Jika Anda ingin beberapa gambar latar tetapi tidak ingin tumpang tindih, Anda dapat menggunakan CSS ini:

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

dengan struktur HTML ini:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>
rachel
sumber
2 

#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>
Luaskan cuplikan

Kami dapat dengan mudah menambahkan beberapa gambar menggunakan CSS3. kita dapat membaca secara detail di sini http://www.w3schools.com/css/css3_backgrounds.asp

Rinku
sumber
1

Anda bisa memiliki div untuk bagian atas dengan satu latar belakang dan yang lain untuk halaman utama, dan memisahkan konten halaman di antara mereka atau meletakkan konten dalam div mengambang di level z lain. Cara Anda melakukannya mungkin berhasil, tetapi saya ragu itu akan berfungsi di setiap browser yang Anda temui.

Sean James
sumber