Background merupakan elemen yang menyenangkan untuk membuat tampilan lebih menarik. Kita juga dapat bermain-main dengan background dengan CSS.
Membuat background dengan CSS bisa dilakukan dengan
- Property background-color.
Dilihat dari nama propertynya kita bisa memberikan nilai warna dalam nama warna, code warna atau rgb - Property background-image
Dilihat dari namanya kita dapat memberikan image sebagai background.
Property yang berhubungan dengan background-image ini adalah:
– property background-position yang menunjukkan di mana background akan diletakkan
– property background-repeat yang akan mengulang pemakaian background
Untuk lebih jelasnya kita akan membuat background-color, background-image dengan repeat-x untuk bg1.gif, dan background-image untuk repeat-y untuk bg2.
Coding secara lengkap adalah sebagai berikut:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Background</title>
<style type=”text/css”>
#bungkus
{
padding-top: 20px;
width: 500px;
height: 800px;
background-color: #272727;
margin-left: auto;
margin-right: auto;
}
#judul
{
width: 460px;
height: 19px;
padding: 3px;
margin-left: auto;
margin-right: auto;
color: white;
background-image: url(‘bg1.gif’);
background-position: left top;
background-repeat: repeat-x;
}
#isi
{
width: 460px;
height: auto ;
padding: 3px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
color: white;
background-image: url(‘bg2.gif’);
background-position: left top;
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id=”bungkus”>
<div id=”judul”>How great Thou art</div>
<div id=”isi”>Oh Lord my God
<br/>When I in awesome wonder
<br/>Consider all the worlds
<br/>Thy hands have made
<br/>I see the stars
<br/>I hear the rolling thunder
<br/>Thy power throughout
<br/>The universe displayed
<br/>
<br/>Then sings my soul
<br/>My Savior, God, to Thee
<br/>How great thou art
<br/>How great thou art
<br/>Then sings my soul
<br/>My Savior, God, to Thee
<br/>How great Thou art
<br/>How great Thou art
</div>
</div>
</body>
</html>
Hasilnya dapat dilihat di http://aris.proweb.asia/background.html dengan tampilan seperti gambar di bawah ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.