Previous PageBackground Repeat : repeat
Background merupakan tampilan latar belakang suatu elemen HTML. Elemen HTML secara visual memiliki dua buah tampilan yaitu tampilan bagian teks (foreground) dan tampilan bagian latar belakangnya (background). Pada bagian tag body, secara defaultnya warna latar memiliki warna putih dengan teks berwarna hitam. Dan pada keseluruhan elemen lainnya warna latar berupa nilai warna transparent. Nilai ini akan membuat bagian teks pada elemen tersebut saja yang tampil saat terdapat elemen HTML lain dibelakangnya.
Penataan background pada halaman web merupakan suatu hal yang penting untuk membuat tampilan yang menarik. Pada umumnya background suatu elemen HTML biasanya dalam bentuk nilai warna. Namun sering dijumpai suatu halaman web menggunakan gambar sebagai tampilan latarnya. Penggunaan gambar sebagai latar bisa diaplikasikan pada bagian keseluruhan body halaman ataupun hanya bagian seksi tertentu saja.
Penataan gambar sebagai gambar latar dapat menggunakan bantuan CSS. Gambar yang digunakan sebagai background dapat dalam format jpg, png maupun gif. CSS menerima masukan dalam bentuk gambar rangkap dalam menata tampilan background-nya. Gambar yang berada di atas gambar pertama harus dalam format png dengan nilai transparent agar gambar di belakangnya dapat terlihat.
Hal yang pertama perlu dipersiapkan adalah gambar yang akan dijadikan sebagai background elemen. Gambar tersebut nantinya akan ditempatkan di belakang teks sebagai gambar latar belakangnya.
Anda dapat menggunakan gambar dengan format png, jpg, gif dan lainnya yang didukung oleh HTML. Ukuran gambar juga perlu diperhatikan agar gambar dapat menempati kontainer elemennya tanpa terpotong. Jika menggunakan gambar ukuran kecil misalnya ukuran 110px x 110px, anda dapat menggunakan bantuan properti background-repeat agar perulangan gambar tersebut dapat diatur.
Berikut gambar yang digunakan sebagai bahan ujicoba.
CSS mempunyai properti background-image yang digunakan untuk menetapkan gambar sebagai background elemen HTML. Properti ini menerima masukan berupa URL tempat file gambar tersebut berada. Anda dapat menggunakan penulisan background saja sebagai jalan pintas (shorthand) namun harus diisi dengan nilai yang sama seperti pada background-image.
Penulisan sintaks :
background-image: URL | none | inherit;
Nilai URL merupakan nilai sebagai alamat URL rujukan tempat gambar berada. Nilai none merupakan nilai default agar tidak menggunakan gambar sebagai background. Nilai inherit merupakan nilai turunan agar nilainya sama seperti nilai pada elemen induknya.
Sebagai contoh misalnya :
div {background-image: url("img/wallpaper.png");}
div {background-image: url("img/gambar.png"), url("img/wallpaper.png");}
div {background-image: none;}
Contoh pertama digunakan untuk menetapkan background dengan jumlah satu buah gambar. Sedangkan contoh kedua digunakan jika ingin memakai gambar rangkap dua dan dipisahkan dengan tanda koma.
Berikut penggunaan background-image pada suatu elemen <div> :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<title>Background Image CSS</title>
<style>
.background{
background-image:url("img/wallpaper.png");
}
.content{
color:red;
text-align: center;
padding:50px 0;
text-shadow: 2px 2px 2px cyan;
}
h1{
font-size:45px;
}
p{
font-size:35px;
}
</style>
</head>
<body>
<div class="background">
<div class="content">
<h1>Selamat Datang</h1>
<p>Di Websiteku<p>
</div>
</div>
</body>
</html>
Gambar latar secara default akan diulang sesuai dengan luas kontainernya. Pengulangan gambar dilakukan secara horisontal dan vertikal. Untuk menata pengulangan gambar background dapat menggunakan properti background-repeat.
Penulisan sintaks :
background-repeat: repeat | no-repeat | repeat-x | repeat-y | round | inherit;
Nilai repeat merupakan nilai default yang akan mengulang gambar ke arah horizontal dan vertikal. Nilai no-repeat akan meniadakan pengulangan gambar. Nilai repeat-x akan mengulang gambar ke arah horizontal. Nilai repeat-y akan mengulang gambar ke arah vertikal. Nilai round akan membulatkan posisi gambar agar gambar tidak ditampilkan secara terpenggal.
Berikut contoh penggunaan properti backround-repeat :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<title>Background Image CSS</title>
<style>
.background{
background-image: url("img/palm_tree2.png");
border: solid 1px magenta;
margin:5px;
}
.repeat{background-repeat: repeat;}
.no-repeat{background-repeat: no-repeat;}
.repeat-x{background-repeat: repeat-x;}
.repeat-y{background-repeat: repeat-y;}
.round{background-repeat: round;}
.content{
color: red;
text-align: center;
padding:35px 0;
text-shadow: 2px 2px 2px cyan;
}
</style>
</head>
<body>
<div class="background repeat">
<div class="content"><p>Background Repeat : repeat</p></div>
</div>
<div class="background no-repeat">
<div class="content"><p>Background Repeat : no-repeat</p></div>
</div>
<div class="background repeat-x">
<div class="content"><p>Background Repeat : repeat-x</p></div>
</div>
<div class="background repeat-y">
<div class="content"><p>Background Repeat : repeat-y</p></div>
</div>
<div class="background round">
<div class="content"><p>Background Repeat : round</p></div>
</div>
</body>
</html>
Hasil Script :
Background Repeat : repeat
Background Repeat : no-repeat
Background Repeat : repeat-x
Background Repeat : repeat-y
Background Repeat : round
Gambar latar secara default akan ditempatkan pada sebelah kiri atas layar. Pada gambar dengan ukuran yang cukup besar mungkin tidak terlalu berpengaruh namun untuk ukuran gambar yang kecil, perlu dilakukan penataan pada posisi gambar tersebut. Penataan gambar background dapat menggunakan properti background-position.
Penuisan sintaks :
background-position: left top | center top | right top | left center | center | right center | left bottom | center bottom | right bottom | top | bottom | inherit;
Nilai left top artinya gambar diletakan pada posisi kiri atas layar. Nilai center top artinya gambar diletakkan pada posisi tengah atas. Nilai lainnya sesuai dengan artinya sendiri-sendiri.
Berikut contoh penggunaan properti backround-position :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<title>Background Image CSS</title>
<style>
.background{
background-image: url("img/palm_tree2.png");
background-repeat: no-repeat;
border: solid 1px magenta;
margin:5px;
}
.left_top{background-position: left top;}
.center_top{background-position: center top;}
.right_top{background-position: right top;}
.left_center{background-position: left center;}
.center{background-position: center;}
.right_center{background-position: right center;}
.left_bottom{background-position: left bottom;}
.center_bottom{background-position: center bottom;}
.right_bottom{background-position: right bottom;}
.top{background-position: top;}
.bottom{background-position: bottom;}
.content{
color: red;
text-align: center;
padding:35px 0;
text-shadow: 2px 2px 2px cyan;
}
</style>
</head>
<body>
<div class="background left_top">
<div class="content"><p>Background posisi left top</p></div>
</div>
<div class="background center_top">
<div class="content"><p>Background posisi center top</p></div>
</div>
<div class="background right_top">
<div class="content"><p>Background posisi right top</p></div>
</div>
<div class="background left_center">
<div class="content"><p>Background posisi left center</p></div>
</div>
<div class="background center">
<div class="content"><p>Background posisi center</p></div>
</div>
<div class="background right_center">
<div class="content"><p>Background posisi right center</p></div>
</div>
<div class="background left_bottom">
<div class="content"><p>Background posisi left bottom</p></div>
</div>
<div class="background center_bottom">
<div class="content"><p>Background posisi center bottom</p></div>
</div>
<div class="background right_bottom">
<div class="content"><p>Background posisi right bottom</p></div>
</div>
<div class="background top">
<div class="content"><p>Background posisi top</p></div>
</div>
<div class="background bottom">
<div class="content"><p>Background posisi bottom</p></div>
</div>
</body>
</html>
Hasil Script :
Background posisi left top
Background posisi center top
Background posisi right top
Background posisi left center
Background posisi center
Background posisi right center
Background posisi left bottom
Background posisi center bottom
Background posisi right bottom
Background posisi top
Background posisi bottom
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
