Background Repeat di CSS: Contoh Code dan Membuatnya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 12, 2020

Section Artikel

1 Background Repeat di CSS
2 CSS background-repeat: no-repeat
3 Posisi latar belakang CSS

Background Repeat di CSS

Secara default, properti background-image mengulang gambar secara horizontal dan vertikal.

Beberapa gambar harus diulang hanya secara horizontal atau vertikal, atau akan terlihat aneh, seperti ini:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/gradien.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p> Gambar latar yang aneh ... </p>

</body>
</html>

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

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/gradien.jpg");
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p> Di sini, gambar latar diulang hanya secara horizontal! </p>

</body>
</html>

Tip: Untuk mengulang gambar secara vertikal, setel background-repeat: repeat-y;

CSS background-repeat: no-repeat

Menampilkan gambar latar belakang hanya sekali juga ditentukan oleh properti background-repeat:

Contoh
Tunjukkan gambar latar belakang hanya sekali:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/cartoon_mobile_phone.png");
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p> Gambar latar hanya muncul satu kali, tapi mengganggu pembaca! </p>

</body>
</html>

Pada contoh di atas gambar latar ditempatkan di tempat yang sama dengan teks.Kita coba mengubah posisi gambar, sehingga tidak terlalu mengganggu teks.

Posisi latar belakang CSS

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("https://dosenit.com/wp-content/uploads/2020/10/cartoon_mobile_phone.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p> Sekarang gambar latar belakang hanya ditampilkan sekali, dan diposisikan jauh dari teks. </p>
<p> Dalam contoh ini kami juga telah menambahkan margin di sisi kanan, sehingga gambar latar belakang tidak akan pernah mengganggu teks.</p>

</body>
</html>