CSS Background

AW - CSS Background - 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 :

Codingku HTML Editori
<!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 :
Codingku HTML Editori
<!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;}
Codingku HTML Editori
<!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;}
Codingku HTML Editori
<!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; 
}
Codingku HTML Editori
<!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>

Selamat Belajar

0 komentar: