Blog

Kupas Tuntas CSS Background

 

Kupas Tuntas CSS Background

CSS     1 week ago


Background CSS selain dapat mengganti dengan warna juga bisa juga menggunakan gambar.

CSS Multiple Background

CSS memungkinkan Anda untuk menambahkan beberapa gambar latar belakang untuk suatu elemen, melalui properti latar belakang-gambar.

Gambar latar belakang yang berbeda dipisahkan oleh koma, dan gambar ditumpuk di atas satu sama lain, di mana gambar pertama paling dekat dengan penampil.

Contoh berikut memiliki dua gambar latar belakang, gambar pertama adalah bunga (selaras dengan bagian bawah dan kanan) dan gambar kedua adalah latar belakang kertas (selaras dengan sudut kiri atas):

.contoh1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

Beberapa gambar latar belakang dapat ditentukan baik menggunakan properti latar belakang individu (seperti di atas) atau properti singkatan latar belakang.

Contoh berikut menggunakan properti singkatan latar belakang (hasil yang sama seperti contoh di atas):

.contoh1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

CSS Ukuran Background

Properti ukuran latar belakang CSS memungkinkan Anda menentukan ukuran gambar latar belakang.

Ukuran dapat ditentukan dalam panjang, persentase, atau dengan menggunakan salah satu dari dua kata kunci: contain atau cover.

Contoh berikut mengubah ukuran gambar latar menjadi jauh lebih kecil daripada gambar asli (menggunakan piksel):

#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}

Dua kemungkinan nilai untuk ukuran latar belakang contain dan cover.

Kata kunci yang berisi skala gambar latar belakang menjadi sebesar mungkin (tetapi lebar dan tingginya harus sesuai di dalam area konten). Dengan demikian, tergantung pada proporsi gambar latar belakang dan area pemosisian latar belakang, mungkin ada beberapa area latar belakang yang tidak tercakup oleh gambar latar belakang.

Kata kunci penutup skala gambar latar belakang sehingga area konten benar-benar tertutup oleh gambar latar belakang (lebar dan tingginya sama dengan atau melebihi area konten). Dengan demikian, beberapa bagian gambar latar belakang mungkin tidak terlihat di area pemosisian latar belakang.

Contoh berikut menggambarkan penggunaan isi dan penutup:

#div1 {
    background: url(img_flower.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url(img_flower.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

Menentukan Ukuran dari Multiple Background Images

Properti ukuran latar belakang juga menerima beberapa nilai untuk ukuran latar belakang (dipisahkan dengan koma), ketika bekerja dengan banyak latar belakang.

Contoh berikut memiliki tiga gambar latar belakang yang ditentukan, dengan nilai ukuran latar belakang yang berbeda untuk setiap gambar:

#example1 {
    background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}

Full Size Background Image

Sekarang kami ingin memiliki gambar latar belakang di situs web yang mencakup seluruh jendela peramban sepanjang waktu.

Persyaratannya adalah sebagai berikut:

  • Isi seluruh halaman dengan gambar (tanpa spasi)
  • Skala gambar sesuai kebutuhan
  • Gambar tengah di halaman
  • Jangan menyebabkan scrollbar

Contoh berikut menunjukkan cara melakukannya; Gunakan elemen html (elemen html selalu setidaknya ketinggian jendela browser). Kemudian, atur latar belakang tetap di atasnya. Kemudian sesuaikan ukurannya dengan properti ukuran latar belakang:

html {
    background: url(img_flower.jpg) no-repeat center fixed; 
    background-size: cover;
}

CSS background-origin Property

Properti latar belakang-asal CSS menentukan tempat gambar latar belakang diposisikan.

Properti mengambil tiga nilai berbeda:

  • border-box - gambar latar belakang dimulai dari sudut kiri atas perbatasan
  • padding-box - (default) gambar latar belakang dimulai dari sudut kiri atas tepi padding
  • content-box - gambar latar belakang dimulai dari sudut kiri atas konten

Contoh berikut mengilustrasikan properti asal latar belakang:

#example1 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: content-box;
}

CSS background-clip Property

Properti klip latar belakang CSS menentukan area lukisan latar belakang.

Properti mengambil tiga nilai berbeda:

  • border-box - (default) latar belakang dicat ke tepi luar perbatasan
  • padding-box - latar belakang dicat ke tepi luar padding
  • content-box - latar belakang dilukis di dalam kotak konten

Contoh berikut mengilustrasikan properti klip latar belakang:

#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}

CSS Advanced Background Properties

Property Description
background Sebuah properti singkatan untuk mengatur semua properti latar belakang dalam satu deklarasi
background-clip Menentukan luas lukisan latar belakang
background-image Menentukan satu atau beberapa gambar latar belakang untuk suatu elemen
background-origin Menentukan di mana gambar latar belakang diposisikan
background-size Menentukan ukuran gambar latar belakang