#6 CSS – Background

Didalam CSS kita bisa memberikan background pada setiap elemen. Background property yang sering digunakan pada CSS :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

background-color

background-color digunakan untuk memberikan warna background pada suatu elemen.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #f4a142;
}
</style>
</head>
<body>

<p>Body menggunakan warna orange</p>

</body>
</html>


background-image

background-image digunakan untuk mengatur gambar yang akan dijadikan sebagai background. Untuk url diisi sesuai dengan lokasi gambar yang akan kita jadikan sebagai background. Sebagai contoh url(“img/gambar1.jpg”); bisa dibaca gambar1 dengan format jpg berada pada folder img.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("bgdesert.jpg");
}
h1 {
color: white;
}
</style>
</head>
<body>
	<h1>Menggunakan gambar sebagai background </h1>
</body>
</html>

background-repeat

background-repeat digunakan untuk mengulang image secara vertical atau horizontal.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

untuk mengulang background secara vertical menggunakan repeat-y, no-repeat digunakan jika tidak ingin adanya perulangan.

background-position

background-position digunakan untuk mengatur posisi suatu gambar. Background postion memiliki banyak property value antara lain :

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and 
scrambled it to make a type specimen book.</p>

</body>
</html>

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *