Belajar CSS Background

Oleh Unknown

Sunday, May 31, 2015

Sinahu coding kali ini akan membahas tentang CSS Background. Properti CSS background digunakan untuk menentukan efek latar belakang suatu elemen HTML. Apakah itu efek warna, gambar, letak posisi, dan sebagainya. Istilah properti yang digunakan untuk background ini ada beberapa macam, yaitu ; background-color, background-image, background-repeat, background-attachment, background-position.

Konco sinahu pasti sudah familiar kan dengan istilah-istilah. Yups, istilah-istilah itu banyak kita jumpai pada kode template blog. Siapa tahu setelah ikut belajar di sinahu soding nanti bisa otak-atik langsung praktek di template blog nya masing-masing.

Baiklah, kita bahas satu per satu. Penjelasan, kegunaan, dan cara penulisan codingnya.

Background Color

Yang pertama Properti background-color, ini untuk menentukan warna latar belakang dari elemen. Bisa menggunakan kode warna atau nama warna dalam bahasa inggris. Format penulisan coding untuk properti background-color diatur seperti ini:


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: red;
}
h1 {
    background-color: yellow;
}

p {
    background-color: green;
}

div {
    background-color: blue;
}
</style>
</head>
<body>

<h1>Aku adalah h1 berwarna kuning</h1>
<div>
Aku di dalam elemen div
<p>Aku adalah paragraf berwarna hijau</p>
Aku masih di dalam elemen div
</div>

</body>
</html>

Perhatikan properti background-color pada kode tersebut. Untuk body saya beri warna merah, heading satu berwarna kuning, sedangkan paragraf berwarna hijau, dan background elemen div berwarna biru.

Maka hasil dari kode tersebut akan terlihat seperti ini :

Background Image

Properti background image ini fungsinya untuk memberikan efek latar belakang dengan gambar. Format penulisan codingnya seperti ini :


body { 
background-image: url("alamat url gambar"); 
}

Untuk menjadikan gambar sebagai background cukup dengan memasukkan url alamat gambar pada kolom url. Sebagai contoh, di bawah ini adalah halaman HTML dengan background lautan.


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("lautan.jpg");
}
</style>
</head>
<body>

<h1 style="color:yellow;">Hai.. Ini aku heading satu sedang berada di halaman dengan background lautan</h1>

</body>
</html>

maka hasilnya :

Background Repeat

Background-repeat ini fungsinya untuk mengatur repeat atau pengulangan background-image, yaitu ketika ukuran gambar yang akan dijadikan background lebih kecil dari halaman, apakah gambar latar belakang akan diulang dalam posisi horizontal ataukah vertikal.

Secara default jika kita tidak menentukan repeat nya, maka posisi gambar akan mengkombinasikan antara keduanya, horizontal dan vertikal. Untuk horizontal dituliskan dengan repeat-x, sedangkan untuk vertikal ditulis repeat-y. Maka format penulisan coding nya akan seperti ini :


body {
 background-image: url("url gambar");
 background-repeat: repeat-x;
}

di bawah ini contoh gambar dengan ukuran kecil yang diatur sebagai background-image, maka kurang lebih akan seperti ini hasilnya.

Background Position

Ini fungsinya untuk melengkapi dan menyempurnakan pengaturan dari background-image. Jika sebelumnya diatur repeat nya, sekarang dengan background-position kita bisa mengatur letak gambar latar belakang akan diposisikan di sebelah mana.

Di bawah ini contoh background no-repeat, sehingga gambarnya hanya tampil sekali, tidak berulang. Kemudian background position nya juga diatur di posisi kanan atas. Selain itu posisi teks juga diatur dengan margin kanan, sehingga tidak bertabrakan dengan gambar latar belakang.


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("pohon.png");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello Bro..!</h1>
<p>Ini contoh background no-repeat, sehingga gambarnya hanya tampil sekali, tidak berulang.</p>
<p>background position nya juga diatur di kanan atas, ditambah lagi posisi teks diatur dengan margin kanan sebesar 200px, sehingga tidak bertabrakan dengan gambar.</p>

</body>
</html>

hasilnya :

Sebagai tambahan, pada contoh di atas penulisan coding properti background dituliskan satu per satu. Kita juga bisa mempersingkat penulisannya menjadi seperti ini :


body {
    background: red url("lautan.png") no-repeat right top;
}

Itulah pembahasan tentang CSS Background. Sedikit rumit tapi semoga bisa dipahami dan bermanfaat. Sampai jumpa pada pembahasan belajar CSS berikutnya.

1 Komentar untuk "Belajar CSS Background"

Balas

Anonymous

July 24, 2015 at 7:52 AM

Sunggu bermanfaat tutorial css nya..

Saya juga punya tutorial css di blog kang, monggo di baca sekalian di koreksi sama akang, takutnya ada yg salah :)

Cara memilih element atau selector tertentu

http://www.wappersunda.com/cara-memilih-element-atau-selector-terte.xhtml