Gambar Sebagai Latar Belakang Dengan CSS

CSS background-image

Properti background-image menentukan gambar untuk digunakan sebagai latar belakang elemen.

Secara default, gambar diulang sehingga mencakup seluruh elemen.

Contoh

Menerapkan gambar untuk latar belakang pada sebuah halaman:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("css-background-image-1.jpg");
}
</style>
</head>
<body>

<h1>Halo Dunia!</h1>

<p>Halaman ini memiliki gambar sebagai latar belakang!</p>

</body></html>

Jalankan Contoh

Contoh berikut menunjukkan kombinasi yang buruk antara tulisan dan latar belakang. Tulisannya sulit dibaca dikarenakan warna tulisan mirip dengan gambar:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("css-background-image-2.jpg");
}
</style>
</head>
<body>

<h1>Halo Dunia!</h1>
<p>Teks ini tidak mudah dibaca dengan gambar latar bekalang yang digunakan.</p>

</body></html>

Jalankan Contoh

Gambar latar dapat diubah untuk elemen tertentu, seperti elemen <p> :

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url("css-background-image-1.jpg");
}
</style>
</head>
<body>

<h1>Halo Dunia!</h1>

<p>Paragraf ini memiliki gambar sebagai latar belakang!</p>

</body></html>

Jalankan Contoh

CSS background-repeat

Secara default, properti background-image mengulangi penampilan gambar latar belakang baik secara horizontal maupun vertikal.

Beberapa gambar harus diulang hanya secara horizontal atau vertikal, untuk menghindari warna latar belakang yang terlihat aneh, seperti contoh dibawah:

Contoh

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

<h1>Halo Dunia!</h1>
<p>Gambar latar yang aneh...</p>

</body></html>

Jalankan Contoh

Jika gambar latar belakang seperti contoh di atas hanya diulang secara horizontal (background-repeat: repeat-x;), gambar latar belakang akan terlihat lebih baik:

Contoh

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

<h1>Halo Dunia!</h1>
<p>Di sini, gambar latar belakang hanya diulang secara horizontal!</p>

</body></html>

Jalankan Contoh

CSS background-repeat: no-repeat

Untuk menampilkan gambar latar hanya sekali (tanpa diulang vertikal dan horizontal) maka berikan properti background-repeat: no-repeat

Contoh

Tampilkan gambar latar sekali, tanpa pengulangan:

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

<h1>Halo Dunia!</h1>
<p>Contoh gambar latar belakang.</p>
<p>Gambar latar belakang hanya muncul sekali, tapi mengganggu pembaca!</p>

</body></html>

Jalankan Contoh

Pada contoh di atas, gambar latar ditempatkan di tempat yang sama dengan tulisan. Sehingga warna tulisan sedikit terganggu, maka posisi gambar harus diubah/dipindahkan.

CSS background-position

Properti background-position digunakan untuk menentukan posisi gambar latar belakang.

Contoh

Posisikan gambar latar belakang di pojok kanan atas:

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

<h1>Halo Dunia!</h1>
<p>Di sini, gambar latar belakang hanya ditampilkan satu kali. Selain itu posisinya jauh dari teks.</p>
<p>Dalam contoh ini juga ditambahkan margin di sisi kanan, sehingga gambar latar belakang tidak mengganggu teks.</p>

</body></html>

Jalankan Contoh

CSS background-attachment

Properti background-attachment menentukan apakah gambar latar belakang harus bisa di- scroll atau fixed (tidak bisa di- scroll):

Contoh

Menentukan gambar latar belakang fixed (tidak bisa di- scroll) :

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

<h1>Properti background-attachment</h1>

<p>Properti background-attachment menentukan apakah gambar latar belakang harus bisa di- scroll atau fixed (tidak bisa di- scroll).</p>

<p><strong>Tips:</strong> Jika Anda tidak melihat scrollbar, coba ubah ukuran jendela browser.</p>

<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang fixed. Coba scroll ke bawah halaman.</p>

</body></html>

Jalankan Contoh

Contoh

Menentukan gambar latar belakang bisa di- scroll:

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

<h1>Properti background-attachment</h1>

<p>Properti background-attachment menentukan apakah gambar latar belakang harus bisa di- scroll atau fixed (tidak bisa di- scroll).</p>

<p><strong>Tips:</strong> Jika Anda tidak melihat scrollbar, coba ubah ukuran jendela browser.</p>

<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>
<p>Gambar latar belakang bisa di- scroll. Coba scroll ke bawah halaman.</p>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Warna Latar Belakang CSS
Tutorial setelahnya : CSS Border
Semua Tutorial CSS : Tutorial CSS