CSS Background

Pada penggunaan background terdapat dua macam yaitu background image dan background color. Kita bisa membuat keduanya dengan menggunakan css.

BACKGROUND COLOR

Pada penggunaan background color kita biasanya menggunakannya pada element html seperti navigasi bar dan footer ataupun element lainnya yang kita butuhkan.

Untuk membuat background color caranya sangat mudah :

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<style type="text/css">

.bgcolor-1{

width: 500px;

height: 500px;

margin: 10px;

background-color: #ffc300;

}

.bgcolor-2{

width: 500px;

height: 500px;

margin: 10px;

background-color: #8f4a2d;

}

</style>

<body>

<div class="bgcolor-1"></div>

<div class="bgcolor-2"></div>

</body>

</html>

BACKGROUND IMAGE

Sama halnya dengan background color, background image juga di gunakan pada element-element html tertentu sesuai kebutuhan, namun biasanya lebih sering digunakan pada body. Untuk cara menuliskan kodenya seperti dibawah ini : 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<style type="text/css">

body{

background-image: url("bgimg.png");

}

</style>

<body>


</body>

</html>

Pada property css background image terdapat property lainnya yang saling berhubungan contohnya seperti dibawah ini : 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<style type="text/css">

body{

background-image: url("bgimg.png");

background-repeat: no-repeat;

background-attachment: fixed;

}

</style>

<body>


</body>

</html>

mari kita bahas property css diatas :

background-repeat : no-repeat; = Mengatur background agar tidak mengulang.

background-attachment: fixed; = Mengatur background agar menjadi tetap (tidak ikut bergulir).

Pada property diatas juga memiliki beberapa value yang lain, yaitu : 

background-repeat: repeat-x; = Mengatur background image mengulang ke samping kanan (sumbu-x).

background-repeat: repeat-y; = Mengatur background image mengulang ke bawah (sumbu-y).

background-attachment: scroll; = Mengatur background image ikur bergulir (scroll).

Silahkan kalian coba agar lebih memahaminya....