Implementasi CSS pada Background
Mengatur Warna Latar
Untuk mengatur warna latar pada suatu dokumen HTML, selain menggunakan atribut BGCOLOR pada tag <BODY>, ternyata dapat juga diatur dengan menggunakan atribut BACKGROUNDCOLOR milik CSS. Selain itu, atribut BACKGROUNDCOLOR juga bisa digunakan untuk mengatur warna latar pada suatu header ataupun paragraf.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {BACKGROUNDCOLOR:
AQUA;}
H1 { BACKGROUNDCOLOR:
RED; }
H2 { BACKGROUNDCOLOR:
YELLOW;}
P { BACKGROUNDCOLOR:
pink; }
</STYLE>
</HEAD>
<BODY>
<H1>Header 1 warna merah</H1>
<H2>Header 2 warna kuning</H2>
<P>
BIntang Kecil
Di Langit yang Biru
Amat Banyak
Menghias Angkasa
</P>
</BODY>
</HTML>
Menggunakan Gambar sebagai Background
Selain menggunakan atribut BACKGROUND pada tag <BODY>, pengaturan gambar sebagai latar belakang / background juga bisa dilakukan dengan memanfaatkan CSS yaitu dengan menggunakan atribut BACKGROUNDMAGE.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUNDIMAGE:
URL('pic1.jpg');
}
</STYLE>
</HEAD>
<HTML>
Posisi gambar pada background juga bisa diatur dengan menggunakan atribut BACKGROUNDPOSITION. Adapun nilai yang bisa diberikan pada atribut BACKGROUNDPOSISITION adalah top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUNDIMAGE:
URL('pic1.jpg');
BACKGROUNDREPEAT:
NOREPEAT;
BACKGROUNDPOSITION:
TOP RIGHT;
}
</STYLE>
</HEAD>
<BODY>
<FONT COLOR="RED"><H1>
Menggunakan Gambar Sebagai Background
memanfaatkan CSS pada posisi kanan atas
</H1> </FONT>
</BODY>
</HTML>
<BODY>
<FONT COLOR="AQUA"> <H1>
Menggunakan Gambar Sebagai Background
memanfaatkan CSS</H1> </FONT>
</BODY>
</HTML>
CSS juga mampu menjadikan suatu gambar yang dijadikan background untuk ditampilkan secara berulang dalam posisi vertikal maupun horisontal. Hal ini dimungkinkan dengan memberi nilai REPEATX ataupun REPEATY pada atribut BACKGROUNDREPEAT. Nilai REPEATX
akan menjadikan penempatan suatu gambar background berulang secara horisontal, dan nilai REPEATY akan menjadikan penempatan suatu gambar background berulang secara vertikal.
<HTML>
<HEAD>
<TITLE>Ini Judulnya</TITLE>
<STYLE TYPE="TEXT/CSS">
BODY {
BACKGROUNDIMAGE:
URL('pic1.jpg');
BACKGROUNDREPEAT:
REPEATY;
}
</STYLE>
</HEAD>
<BODY>
<FONT COLOR="RED"> <H1>
Menggunakan Gambar Sebagai Background
dengan perulangan vertikal</H1> </FONT>
</BODY>
</HTML>
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar