CSS Backgrounds

Space For Rent!

CSS Backgrounds

Properti CSS background:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Background Color

Properti background-color berfungsi untuk menentukan warna latar belakang dari sebuah elemen. Latar belakang warna dari halaman contohnya seperti ini:

Warna dalam CSS yang sering digunakan adalah dengan:

• Nama warna yang belaku - seperti "red"
• dengan HEX - seperti "#ff0000"
• dengan RGB - seperti "rgb(255,0,0)"

Dalam contoh di bawah ini, <h1>, <p>, dan <div> akan memiliki warna background yang berbeda:

Background Image

Properti background-image menentukan gambar yang akan digunakan sebagai latar belakang dari sebuah elemen. Secara default, gambar diulang sehingga mencakup seluruh elemen. Gambar latar belakang untuk halaman dapat diatur seperti ini:

Background Image - Repeat Horizontal dan Vertical

Properti background-image otomatis mengulangi gambar secara horisontal dan vertikal. Beberapa gambar harus diulang hanya horizontal atau vertikal, atau mereka akan tampak aneh, seperti ini:

Jika gambar di atas terlihat aneh atau jelek, maka anda bisa menggunakan (background-repeat: repeat-x;), dan background akan terlihat lebih sedap dipandang. Contohnya seperti ini:

Background Image - Set position and no-repeat

Menampilkan gambar latak belakang sekali dengan menggunakan properti background-repeat juga bisa:

pada contoh di atas, posisi gambar masih setara dengan text. Posisi gambar kurang tepat sehingga menggangu pembaca kita ingin supaya posisi gambar lebih tepat dan tidak mengganggu pembaca, maka kita gunakan properti background-position:

Background Image - Fixed position

Untuk menggunakan latar belakang gambar dengan posisi tetap atau fixed (tidak akan berpindah ketika teks di scroll), anda bisa menggunakan properti background-attachment:

Background - Properti Singkatan

untuk menghemat kode dalam pemrograman, biasanya programmer menggunakan singkatan untuk lebih menghemat kode. Untuk itu, maka kita gunakan single property untuk lebih hemat baris dalam kosing.

Untuk menyingkat kode kita cukup menggunakan properti background:

Saat anda menggunakan properti singkatan, maka anda harus mengurutkan value dari properti tersebut seperti:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Tidak akan ada masalah jika salah satu nilai properti hilang, selama yang lain dalam urutan.

Untuk terus mendukung Aktifitas kami, bisa donasikan bantuan anda dengan klik tombol di bawah.

Space For Rent!

Tweet

Postingan terkait:

Ditulis Mimin Betta — Friday, June 3, 2016 — Add Comment — Betta Dev, CSS Tutorial, CSS3, Help Programmer, How To, HTML, HTML CSS, HTML Style, Pemrograman, Pemula Belajar, Source Code, Web Development