CSS untuk background

Latar belakang properti CSS digunakan untuk menentukan efeklatar belakang dari suatu elemen.

CSS properti yang digunakan untuk efek latar belakang:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
Warna Latar Belakang

Properti background-color menetapkan warna latar belakang dari suatu elemen.

Warna latar belakang dari halaman yang didefinisikan dalam pemilih bod,contoh:
body {background-color:#b0c4de;}
Script lengkapnya

<html>
<head>
<style type="text/css">
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>spot-design emang mantap coy....</p>
</body>
</html>
Dengan CSS, warna yang paling sering ditentukan oleh:

nilai HEX - seperti "# ff0000"
sebuah nilai RGB - seperti "rgb (255,0,0)"
nama warna - seperti "red"

Latar Belakang Gambar

Properti background-image menentukan gambar untuk digunakan sebagai latar belakang dari suatu elemen.

Secara default, gambar diulang sehingga meliputi seluruh elemen.

Gambar latar belakang untuk sebuah halaman dapat diatur seperti ini:
body {background-image:url('url gambar/tempat gambar disimpan');}
Script lengkapnya:

<html>
<head>
<style type="text/css">
body {background-image:url('https://lh4.googleusercontent.com/-9MFP6hBtT_U/Tpv8okyKfLI/AAAAAAAAAik/ciePjw4fWTY/s300/gspot-logo.png');}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Latar Belakang Gambar - Ulangi horizontal atau vertikal

Secara default, properti background-image mengulangi gambar baik secara horizontal maupun vertikal.

Beberapa gambar harus diulang hanya secara horizontal atau vertikal, atau mereka akan tampak aneh, seperti ini:  
body{background-image:url(' http://imagecss.com/images/repeat-x-gradient.jpg');}
Coba juga script ini
body{background-image:url(' http://imagecss.com/images/repeat-x-gradient.jpg ');background-repeat:repeat-x;}
Repeat-x buat pengulangan gambar secara horizontal dan repeat-y secara vertical serta no-repeat tidak ada pengulangan.



Simpan dengan nama index.html atau*.html coba dibrowser.


Maaf kalau ada yang belum mengerti. Silahkan komentar saja