CSS Properties
Di bawah ini adalah macam-macam CSS Properties yang digunakan untuk membuat background:1. background-color
2. background-image
3. background-attachment
4. background-position
5. background-repeat
Background Color
Anda dapat memberikan nilai atau value pada background-color dengan 3 cara, yaitu:1. Menggunakan nilai Hexadecimal seperti "#0000ff"
2. Menggunakan nilai RGB seperti RGB(255,255,0)
3. Menggunakan nama color seperti "red","yellow", dan lain sebagainya.
Di bawah ini adalah contoh penggunakan CSS background color pada elemen/tag HTML:
Nama file: background-color.html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: red;
}
p {
background-color: #e0ffff;
}
div {
background-color: rgb(10,255,250);
}
</style>
</head>
<body>
<h1>Heading 1 menggunakan CSS Background Color</h1>
<div>
Ini adalah elemen DIV yang menggunakan CSS Background Color.
<p>Ini adalah elemen paragraf yang menggunakan CSS Background Color.</p>
Ini juga masih di dalam elemen DIV
</div>
</body>
</html>
Background Image
Background Image digunakan untuk menampilkan image atau gambar sebagai background pada elemen atau tag di HTML.Untuk lebih jelasnya, Anda dapat langsung mencobanya seperti script di bawah ini:
Nama File: background_image.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("unnamed.jpg");
}
</style>
</head>
<body>
<h1>Ini adalah heading</h1>
<p>Ini adalah heading</p>
<div><p>Paragraf ini di dalam elemen DIV</p>
</div>
</body>
</html>
Apabila file diatas dijalankan di web browser, maka akan menampilkan output seperti di bawah ini:
Background Repeat
Background Repeat di gunakan untuk menampilkan background image berulang-ulang baik secara horisontal maupun vertikal.Ada beberapa nilai yang sering digunakan pada Background Repeat, yaitu:
1. repeat-x digunakan untuk mengulang background-image secara horisontal
2. repeat-y digunakan untuk mengulang background-image secara vertikal
3. no-repeat digunakan agar background-image tidak tampil secara berulang (sesuai gambar aslinya).
Untuk lebih jelasnya, Anda dapat memperhatikan contoh dibawah ini:
Nama File: background_repeat.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("unnamed.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Ini adalah heading h1</h1>
<h2>Ini adalah heading h2</h2>
<h3>Ini adalah heading h3</h3>
<p>Ini adalah heading</p>
<div><p>Paragraf ini di dalam elemen DIV</p>
</div>
</body>
</html>
Apabila file diatas dijalankan di web browser, maka akan menampilkan output seperti di bawah ini:
Coba Anda modifikasi file diatas dengan mengubah background-repeat nya menjadi:
background-repeat: repeat-y;
Maka akan menampilkan output seperti di bawah ini:
0 comments:
Post a Comment