Skip to content Skip to sidebar Skip to footer
Home / CSS / Programing / Belajar CSS Part 4: Membuat Background

Belajar CSS Part 4: Membuat Background

By Lutfie Post a Comment

Membuat Background menggunakan CSS

CSS Background

Properti background pada CSS digunakan untuk menentukan efek latar belakang untuk suatu elemen.

Properti background pada CSS:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Color

Properti background-color digunakan untuk menentukan warna latar belakang suatu elemen.
Contoh
body {
    background-color: skyblue;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Belajar CSS Background</h1>
<p>Halaman ini memiliki latar belakang biru langit</p>

</body>
</html>

Hasilnya:

 Dalam CSS, warna paling sering ditentukan dengan menggunakan:
  • nama warna yang valid - seperti "blue"
  • nilai HEX - seperti "#0000FF"
  • nilai RGB - seperti "rgb (0,0,255)"

 Pada contoh di bawah ini, elemen <h1>, <div>, dan <p> memiliki warna latar belakang yang berbeda:
Contoh
h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Contoh penggunaan background-color</h1>
<div>
Ini adalah teks yang berada di dalam elemen div.
<p>Teks ini memiliki warna latar belakang tersendiri</p>
Teks ini masih dalam elemen div
</div>

</body>
</html>

Hasilnya:

 Background Image
Properti background-image digunakan untuk menentukan gambar sebagai latar belakang suatu elemen. Secara default, gambar diulang sehingga mencakup seluruh halaman.
Contoh
body {
    background-image: url("nama_gambar.jpg");
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Contoh penggunaan background-image</h1>
<p>Halaman ini mempunyai latar belakang gambar</p>

</body>
</html>

Hasilnya:
Catatan: Bila menggunakan gambar sebagai latar belakang, gunakan gambar yang tidak mengganggu warna teks.

Background-repeat
Secara default, properti background-image mengulangi gambar secara horizontal dan vertikal. Untuk mengatur perulangan bakcground kita bisa menggunakan properti background-repeat.

 Background-repeat memiliki empat properti, yaitu repeat, no-repeat, repeat-x, dan repeat-y.
  • Properti repeat merupakan nilai standar yang memberikan perulangan pada sumbu x dan y.
  • Properti no-repeat fungsinya untuk menghilangkan perulangan.
  • Properti repeat-x memberikan perulangan hanya pada sumbu x (horizontal).
  • Properti repeat-y memberikan perulangan hanya pada sumbu y (vertikal).

 Secara default, gambar yang ditampilkan oleh browser pada latar belakang adalah gambar yang berulang (repeat). Oleh karena itu, untuk menampilkan gambar latar belakang tidak berulang gunakan properti background-repeat.
Contoh
background-repeat: no-repeat; artinya gambar background tidak berulang.
body {
    background-image: url("nama_gambar.png");
    background-repeat: no-repeat;
}

background-repeat: repeat-y; artinya gambar background berulang ke sumbu-x.
body {
    background-image: url("nama_gambar.png");
    background-repeat: repeat-x;
}

background-repeat: repeat-y; artinya gambar background berulang ke sumbu-y.
body {
    background-image: url("nama_gambar.png");
    background-repeat: repeat-y;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Belajar background-repeat</h1>
<p>Contoh penerapan properti background-repeat</p>

</body>
</html>

 Hasil dari penerapan background-repeat:
  • background-repeat: no-repeat;
  • background-repeat: repeat-x;

  • background-repeat: repeat-y;

Background-position
Apabila gambar latar belakang ditampilkan di tempat yang sama letaknya dengan teks, maka ubahlah  posisi gambar agar tidak mengganggu teks.

 Berikut adalah kode CSS untuk mengubah posisi gambar tersebut. Tambahkan properti background-position seperti berikut.
Contoh
body {
    background-image: url("nama_gambar.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Hasilnya:
Catatan: Pada contoh di atas, hanya salah satu value dari background-position, yaitu "right top (kanan atas)".
Background-attachment
Apabila kita ingin agar gambar latar belakang tetap di tempatnya, dengan kata lain tidak akan digulir atau berpindah saat kita menggulir halaman ke bawah atau ke atas, gunakan properti background-attachment.
Contoh
body {
    background-image: url("nama_gambar.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
body {
<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<h1>Belajar background-repeat</h1>
<p>Contoh penerapan properti background-repeat</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

Hasilnya:

 Mempersingkat Pengkodean (Shorthand)
Apabila kita ingin mempersingkat pengkodean (shorthand), kita juga bisa menggunakan properti background diikuti oleh value yang berurutan.
Contoh
body {
    background: #ffffff url("nama_gambar.png") no-repeat right top;
}

 Bila menggunakan properti shorthand, urutan propertinya adalah:
  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position
Tidak masalah jika salah satu dari value properti ditiadakan, tetapi urutannya harus tetap sesuai aturan tersebut.
Demikian pembahasan mengenai background pada CSS.
Semoga bermanfaat!

Thanks for reading Belajar CSS Part 4: Membuat Background. Please share...!

Post a Comment for "Belajar CSS Part 4: Membuat Background"