Dibaca: 294

CSS Background Position

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

css-background-position-top

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

css-background-position-bottom

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

css-background-position-left

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

css-background-position-right

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

css-background-position-top-left

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

css-background-position-top-right

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

css-background-position-bottom-left

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

css-background-position-bottom-right