Mengenal Macam Macam Property Background Pada CSS

Mengenal Macam Macam Property Background Pada CSS - Salah satu property css untuk memperindah web adalah background. CSS menyediakan banyak property background yang dapat anda gunakan.
Background sendiri berarti latar belakang, dengan background elemen HTML akan tampak lebih indah dan hidup. Secara umum, mungkin dalam CSS kita hanya mengetahui dua property background saja, yaitu background-color dan background-image, namun ternyata ada banyak property background lain yang pastinya keren banget, berikut adalah daftarnya.

Background Color

Background color berfungsi untuk memberikan warna pada latar belakang suatu elemen. Berikut syntaxnya.

background-color: warna;

Hasilnya.

Background Color

Background Image

Background image berfungsi menggunakan gambar sebagai latar belakang sebuah elemen. Berikut syntaxnya.

background-image: url(gambar.jpg);

Hasilnya.

Background Image

Backround Atachment

Property ini berguna untuk mengatur keadaan background ketika halaman scroll kebawah, apakah ikut nyecroll atau diem saja.
Ada 5 value yang dapat digunakan di property ini, yaitu fixed, inherit, local, scroll, initial, dan unset. Namun yang biasa digunakan adalah fixed. Yang berfungsi membuat gambar di background diam saja.
Untuk menggunakan property ini kita juga harus meletakan property background-image. Berikut syntaxnya.

background-image: url(gambar.jpg);
background-attachment: initial/local/inherit/scroll/unset/fixed;

Background Atachment Fixed.

Background Image & Background Attachment Fixed

Background Atachment Scroll.

Background Image & Background Attachment Scroll

Background Size

Property ini berfungsi untuk mengatur ukuran background yang digunakan.
Ada 2 value yang dapat digunakan di property ini, yaitu cover dan contain.

• Cover berfungsi mengatur ukuran background sebesar elemen htmlnya.
• Contain merupakan defaultnya, background ukuranya sesuai ukuran asli gambar.

Untuk menggunakan property ini kita juga harus meletakan property background-image. Berikut syntaxnya.

background-image: url(gambar.jpg);
background-size: cover/contain;

Background Size Cover.

Background Image & Background Size Cover

Background Size Contain.

Background Image & Background Size Contain

Background Repeat

Property ini berfungsi mengatur pengulangan pada background gambar yang ukuranya kurang dari ukuran elemen.
Ada 4 value yang biasa digunakan di property ini, yaitu repeat no-repeat, repeat-x dan repeat-y.

• repeat mengatur pengulangan secara horizontal maupun vertikal
• repeat-x mengatur pengulangan secara horizontal
• repeat-y mengatur pengulangan secara vertikal
• no-repeat tidak melakukan pengulangan

Untuk menggunakan property ini kita juga harus meletakan property background-image. Berikut syntaxnya.

background-image: url(gambar.jpg);
background-repeat: no-repeat/repeat-x/repeat-y;

Background Repeat.

Background Image & Background Repeat

Background Repeat X.

Background Image & Background Repeat X

Background Repeat Y.

Background Image & Background Repeat Y

Background No Repeat.

Background Image & Background No-Repeat

Background Position

Property terakhir yaitu background position, berfungsi menetapkan posisi dari background gambar, ada empat value, top, left, right, bottom. Berikut kodenya.

background-image: url(gambar.jpg);
background-positon: top/right/left/bottom;

Background Position Right Bottom.

Background Image & Background Position Right Bottom

Itulah beberapa property background pada css yang dapat anda coba.
Sekian postingan saya yang berjudul Mengenal Macam Macam Property Background Pada CSS.
Jangan lupa baca postingan saya sebelumnya Cara Membuat Dropdown Menu Dengan HTML