Cara membuat background di CSS
Cara membuat background di CSS
CSS background digunakan untuk mengubah background dari elemen HTML.
Properties dari CSS Background :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
background-color merincikan warna background dari sebuah elemen HTML.
h2{background-color:red;}
Dalam CSS, sebuah warna/color dirincikan dengan :
- Nilai HEX, seperti : "#33FF00".
- Nilai RGB, seperti : "rgb(0,0.255)".
- Nama warna, seperti : "blue".
Pada contoh dibawah ini elemen-elemen berikut memiliki style background-color yang berbeda-beda :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2{background-color:red;}
p{background-color:#FFFF33;}
div{background-color:rgb(255,0,255);}
</style>
</head>
<body>
<h2>Ini adalah h2</h2>
<p>Ini adalah paragraf</p>
<div>Ini adalah div</div>
</body>
</html>background-image
background-image merincikan gambar sebagai background sebuah elemen HTML.
Secara default gambar/image akan diulang-ulang menutupi seluruh bagian elemen.
body{background-image:url("pattern.gif");}
contoh :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image:url("pattern.gif");}
</style>
</head>
<body>
<h1>background diulang-ulang secara otomatis </h1>
</body>
</html>| Ketika anda menggunakan background image sebaiknya anda menggunakan kombinasi background dan text yang kontras satu sama lain sebab seringkali penggunaan kombinasi background malah mengakibatkan tulisan/konten dari dokumen tidak jelas. |
background-image : diulang secara horizontal / vertical
Anda bisa menentukan apa sebuah background diulang hanya secara horizontal atau vertical.
Ada kalanya anda hanya memerlukan background secara vertical atau horizontal, pada navigation bar situs codingku ini, background-nya di repeat/ulang secara horizontal.
Cara penulisan horizontal dan vertical :
Horizontal : menambahkan attribut : background-repeat, dan value-nya : repeat-x
Vertical : menambahkan attribut : background-repeat, dan value-nya : repeat-y
Contoh secara horizontal :
body{background-image:url("pattern.gif"); background-repeat:repeat-x;}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image:url("pattern.gif"); background-repeat:repeat-x;}
</style>
</head>
<body>
<h1>background diulang-ulang secara horizontal saja</h1>
</body>
</html>
Contoh secara vertical :
body{background-image:url("pattern.gif"); background-repeat:repeat-y;}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image:url("pattern.gif"); background-repeat:repeat-y;}
</style>
</head>
<body>
<h1>background diulang-ulang secara vertical saja</h1>
</body>
</html>background-image : no-repeat dan set-position
Anda bisa mengatur CSS agar gambar background tidak diulang-ulang.
Anda juga bisa mengatur CSS agar gambar background tampil pada posisi yang anda inginkan.
body
{
background-image:url("pattern.gif");
background-repeat:no-repeat; background-position:right bottom;
}
{
background-image:url("pattern.gif");
background-repeat:no-repeat; background-position:right bottom;
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-image:url("pattern.gif");
background-repeat:no-repeat;
background-position:right top;
}
</style>
</head>
<body>
<h1>background tidak diulang dan diposisikan pada bagian kanan atas</h1>
</body>
</html
Comments
Post a Comment