Property background-position digunakan untuk menentukan lokasi dari gambar latar.
Berikut adalah tabel nilai dari property background-position dan posisi letak gambar latar.
| Nilai | Posisi |
|---|---|
| top | tengah atas |
| bottom | tengah bawah |
| left | kiri tengah |
| right | kanan tengah |
| top left | kiri atas |
| top right | kanan atas |
| bottom left | kiri bawah |
| bottom right | kanan bawah |
Perhatikan contoh-contoh di bawah untuk lebih jelasnya.
background-position: top
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Position</title>
</head>
<style>
body {
background-image: url("rajatutor.png");
background-repeat: no-repeat;
background-position: top;
}
</style>
<body>
<br>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<br>
</body>
</html>
Berikut adalah hasilnya bila dilihat dengan browser
background-position: bottom
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Position</title>
</head>
<style>
body {
background-image: url("rajatutor.png");
background-repeat: no-repeat;
background-position: bottom;
}
</style>
<body>
<br>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<br>
</body>
</html>
Berikut adalah hasilnya bila dilihat dengan browser
background-position: left
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Position</title>
</head>
<style>
body {
background-image: url("rajatutor.png");
background-repeat: no-repeat;
background-position: left;
}
</style>
<body>
<br>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<br>
</body>
</html>
Berikut adalah hasilnya bila dilihat dengan browser
background-position: right
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Position</title>
</head>
<style>
body {
background-image: url("rajatutor.png");
background-repeat: no-repeat;
background-position: right;
}
</style>
<body>
<br>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<br>
</body>
</html>
Berikut adalah hasilnya bila dilihat dengan browser
background-position: top left
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Position</title>
</head>
<style>
body {
background-image: url("rajatutor.png");
background-repeat: no-repeat;
background-position: top left;
}
</style>
<body>
<br>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<br>
</body>
</html>
Berikut adalah hasilnya bila dilihat dengan browser
background-position: top right
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Position</title>
</head>
<style>
body {
background-image: url("rajatutor.png");
background-repeat: no-repeat;
background-position: top right;
}
</style>
<body>
<br>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<br>
</body>
</html>
Berikut adalah hasilnya bila dilihat dengan browser
background-position: bottom left
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Position</title>
</head>
<style>
body {
background-image: url("rajatutor.png");
background-repeat: no-repeat;
background-position: bottom left;
}
</style>
<body>
<br>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<br>
</body>
</html>
Berikut adalah hasilnya bila dilihat dengan browser
background-position: bottom right
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Position</title>
</head>
<style>
body {
background-image: url("rajatutor.png");
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
<body>
<br>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<p>Ini adalah contoh sebuah paragraf</p>
<br>
</body>
</html>
Berikut adalah hasilnya bila dilihat dengan browser
