Memahami Properti CSS Background

Halo blogger, kesempatan kali ini Saya kembali mencoba membagikan pengalaman Saya, yaitu dengan pembahasan Memahami Properti CSS Background.

Background merupakan properti / perintah CSS yang paling lumrah, atau paling sering kita temukan didalam suatu halaman website / blog, tentu saja karena script inilah yang mengatur warna dari suatu halaman HTLM / web. Dalam satu perintah background terdiri dari beberapa pembagian kode berikut ini diantaranya.

Background

Dengan satu properti ini kita bisa mengatur warna dari seluruh elemen yang ada pada web, mulai dari warna warni dan juga gambar. Contoh penggunaan :

Dengan satu warna saja:

• Standart Color, background: red;
• Hexa Color, background: #6cf; atau background: #66CCFF;
• RGB Color, background: RGB(0,256,0);
• Agar lebih mendetail kepada background warna gunakan, background-color. Contoh : background-color: red;
• Selengkapnya tentang pewarnaan CSS pada artikel Memahami Warna pada CSS (Hexa Color dan RGB)

Dengan gambar:

• Background : url(alamatgambar.jpg); atau background-image : url(alamatgambar.png);. Background-image digunakan khususnya untuk background gambar.

Background-repeat

Yaitu properti dari background yang mengatur pengulangan dari background gambar.

• Agar background gambar tidak diulang, contoh : div{background-image: url(images.jpg; background-repeat: no-repeat} atau div{background-image: url(images.jpg) no-repeat;}.
• Agar background berulang secara horizontal, contoh : div{background-image: url(images.jpg; background-repeat-x: initial; background-repeat-y: no-repeat;}.
• Agar background berulang secara vertikal, contoh : div{background-image: url(images.jpg; background-repeat-y: initial; background-repeat-x: no-repeat;}.

Background-size

Yaitu properti background yang mengatur ukuran dari background itu sendiri, yang berbeda dari ukuran elemen yang membungkusnya.

• Mengatur width (Lebar) dan height (Tinggi) sekaligus, background-size: 50%; atau background-size: 200px;.
• Mengatur width dan height secara terpisah, background-size: 200px 100px;. 200px disini sebagai width sedangkan 100px sebagai height.
• Mengatur lebar dan tinggi secara default(Bawaan ukuran gambarnya), background-size: initial; hal ini tidak perlu di implementasikan atau dideskripsikan karena sudah menjadi settingan dasar CSS umumnya.
• Mengatur ukuran background gambar sesuai dengan ukuran elemen pembungkusnya, background-size: cover;.

Background-position

Yaitu properti background yang mengatur posisi dari background, secara melintang (Horizontal) maupun membujur (Vertikal).

• Mengatur horizontal dan vertikal sekaligus, background-position: 150px 300px;. 150px disini mengatur position horizontal, sedangkan 300px mengatur positon vertikal.
• Mengatur secara horizontal saja, background-position-x: 150px;.
• Mengatur secara vertikal saja, background-position-y: 300px;.

Background linear gradient

Properti background ini digunakan untuk membuat warna yang ada pada background banyak atau lebih dari satu secara garis lurus.

• Background: linear-gradient(red, blue);. Hasil dari kode berikut ini akan menampilkan background seperti dibawah ini. Yaitu warna akan mengarah kebawah, dari merah ke biru. Secara defaultnya warna linear-gradient akan kebawah (To bottom), atau jika dalam penulisan kodenya, background: linear-gradient(to bottom, red, blue);

Background radial gradient

Properti background ini digunakan untuk membentuk warna background lebih dari satu secara melingkar.

• Background:radial-gradient(red,blue);. Hasil dari kode berikut ini akan menampilkan warna background dimulai dari tengah merah kemudian melebar ke warna biru. 

Untuk linear gradient dan radial gradient, gunakan "," koma  untuk memisahkan antar warna atau menambahkan warna lebih banyak, untuk berapa banyak warna yang dapat dimuat sepertinya tidak memiliki batasan. Lebih lengkapnya baca artikel Tutorial Membuat Background Bermotif Dengan Repeating Gradient.

Sekian dulu dari Saya pada artikel ini, semoga ini dapat bermanfaat bagi Sobat sekalian, Terima Kasih.