Setelah sebelumnya kita mempelajari Belajar css cara menyisipkan script css pada html. yang mudah-mudahan bisa difahami, kali ini dilanjutkan belajar css kita pada Css Background.
Dengan css background membuat halaman web kita semakin menarik. Kita dapat memasang backgroud pada halaman web berupa warna maupun gambar yang sesuai keinginan dan selera.
Bakground dapat dipasang untuk seluruh halaman yaitu tag body, pada tag heading maupun pada paragraf.
Css memungkinkan kita untuk mengatur background, pengaturan itu meliputi :
- background-color.
- background-image.
- background-repeat.
- background-attachment.
- background-position.
Background color.
Untuk memasang warrna sebagai background, digunakan properti background-color.
Properti background-color mendefinisikan latar belakang warna untuk elemen html yang ditetapkan ( body, heading, paragraf maupun div ). Untuk mengatur background warna pada seluruh halaman web, maka kita menempatkan properti background-color pada selector body
body
{
background-color:#FF00FF;
}
Selain diterapkan pada selector body, properti background juga dapat diterapkan pada selector elemen html lainnya, misalnya pada selector heading (h1....h6), selector paragraf, selector div dan lainnya.
h2
{
backgroun-color:blue;
}
p
{
background-color:#FFD700;
}
div
{
background-color:rgb(255,0,0);
}
Dalam menuliskan nilai/value dari sebuah warna dapat mengunakan : nama warna ( dalam bahasa inggris ), kode hexadecimal (misalnya: #FFD700 ) atau nilai rgb misalnya: rgb( 255,0,0).
Background image.
Untuk memasang gambar sebagai background digunakan properti background-image. Gambar yang ditetapkan sebagai background sebaiknya berada pada satu folder yang sama dengan folder tempat menyimpan dokumen css/html hal ini memudahkan dalam penulisannya. Akan tetapi kita bisa juga mengambil gambar dari tempat lain di internet, yang dalam menuliskannya harus mencantumkan alamat/url gambar tersebut dengan lengkap.
Berikut ini contoh penggunaan properti background-image :
<html>
<head>
<style type="text/css">
body { background-image:url(gambar.png); }
#header { background-image: url(http://alamat/nama.png); }
</style>
</head>
<body>
</body>
</html>
Background repeat.
Untuk memenuhi halaman yang menggunakan gambar sebagai background, secara default penempatan gambar akan melakukan pengulangan (repeat) baik secara vertikal maupun horizontal. Namun kita dapat mengubahnya dengan menggunakan properti background-repeat, dengan memilih value:
" repeat-x " (untuk pengulangan horizontal),
" repeat-y " (untuk pengulangan vertikal) dan
" no-repeat " (jika tidak menginginkan pengulangan).
/* pengulangan horizontal */
body {
background-image: url(gambar.png);
background-repeat:repeat-x; }
/* pengulangan vertikal */
body {
background-image: url(gambar.png);
background-repeat:repeat-y; }
/* tidak ada pengulangan */
body {
background-image: url(gambar.png);
background-repeat:no-repeat; }
Background attachment.
Properti background-attachment mengatur pergeseran terhadap gambar background. Ketika kita membuka halaman web dengan background gambar yang tidak diatur, maka saat menggeser mose maka gambar background ikut bergerak, untuk agar gambar tidak ikut bergerak maka digunakan pengaturan menggunakan properti background-attachment.
Nilai dari backround-attachment adalah: scroll (untuk bergerak) dan pixed (untuk diam).
body { backgraund-image: url(gambar.jpg); background-attachment: pixed; }
.header { backgraund-image: url(gambar.jpg); background-attachment:scroll; }
Background position.
Properti background-position mendefinisikan posisi awal gambar saat digunakan sebagai background.
Nilai dari properti background-position dapat dipilih:
top-left, top-center, top-right,
center-left; center-center, center-right,
bottom-left, bottom-center, bottom-right,
x%, y%
xpos, ypos.
Contoh penggunaanya :
body {
background-image: url("gambar.jpg");
background-position: top left; }
Jika kita akan menggunakan semua properti diatas, maka urutan dalam penulisannnya adalah :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
body {
background-color:green;
background-image: url("gambar.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top left;
}
Kita dapat menyingkatkan tulisan menjadi :
body
{
background: green
url("gambar.jpg")
no-repeat pixed
top left;
}
Begitulah uraian tentang cara css memberi gaya pada background.
Sumber materi: W3Schools.
Baca juga:
¤Belajar css cara menyisipkan script css pada html.
¤Cara praktis membuat akun email google.
¤Cara membuat gambar transparan dengan IDesigner.
¤Belajar html bagi peemula.
¤Cara membuat dokumen html/css dengan X-plore.
back to top
