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:
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>Dengan CSS, warna yang paling sering ditentukan oleh:
<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>
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:
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