Page 27 - WP YAMIN - MTI CANDUANG
P. 27
Bengkel Internet PENS-ITS : Cascading Style Sheets
</STYLE> 3. Background gambar
</HEAD> Properties Value Keterangan
<BODY> background- url Alamat gambar
image
yang dituju
Text ini berada di tengah halaman , background- repeat Diulang dlm hal
karna di lakukan pengaturan halaman repeat repeat-x Diulang sumbu x
dengan menggunakan padding atas 10%, repeat-y Diulang sumbu y
no-repeat
Tampil 1 gbr
kanan 20%,bawah 40%,dan kiri 20%.
</BODY> Background- top left Atas kiri hal
</HTML> position top center Atas tngh hal
top right
Atas kanan hal
center left Tgh kiri hal
V. MEMBUAT BACKGROUND center center Pusat hal
1. Background warna center right Tngh kanan hal
Bwh kiri hal
bottom left
<HTML> bottom center Bwh tgh hal
<HEAD> bottom right Bwh kanan hal
<TITLE>Menggunakan Background x-% y-% Pakai nilai %
x-pos y-pos
Warna</TITLE> Contoh 1 :
<STYLE type="text/css"> <HTML>
BODY { background-color : yellow} <HEAD>
</STYLE> <TITLE>Menggunakan Background
</HEAD> Gambar</TITLE>
<BODY> <STYLE ="text/css">
Halaman ini di buat Berwarna Kuning BODY
</BODY> {
</HTML> background-image:
url("drums.jpg");
2. Background campuran background-repeat: repeat-x;
<HTML> }
<HEAD> </STYLE>
<TITLE>Menggunakan Background </HEAD>
Warna</TITLE> <BODY>
<STYLE ="text/css"> Background Berulang pada Sumbu X
body {background-color : #99CCFF} </BODY>
h2 {background : green} </HTML>
h3 {background-color : transparent}
p {background : rgb(240,248,255)} Contoh 2 :
</STYLE> <HTML>
</HEAD> <HEAD>
<BODY> <TITLE>Menggunakan Background
<h2>Header 2,Background Hijao</h2> Gambar</TITLE>
<h3>Header 3 , Bakground Transparan</h3> <STYLE ="text/css">
<p>Background pada paragraph</p> BODY
</BODY> {
</HTML> background-image:url ("motor.jpg");
background-repeat: no-repeat;
background-position: center center;
}
5
