Penulisan Kode Warna Background pada CSS

Properti background CSS digunakan untuk menentukan efek latar belakang elemen.

Properti background CSS:

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

Warna Background

Properti background-color menentukan warna Background suatu elemen.

Warna Background halaman diatur seperti ini:

body {
  background-color: lightblue;
}

Dengan CSS, warna paling sering ditentukan oleh:

nama warna yang valid - seperti "merah"
nilai HEX - seperti "# ff0000"
nilai RGB - seperti "rgb (255,0,0)"

Lihatlah Nilai Warna CSS untuk daftar lengkap dari nilai warna yang mungkin.
Pada contoh di bawah ini, elemen <h1>, <p>, dan <div> memiliki warna latar belakang yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

Gambar Background

Properti background-image menetapkan gambar yang akan digunakan sebagai Background suatu elemen.

Secara default, gambar diulang sehingga mencakup seluruh elemen.

Gambar Background untuk halaman dapat diatur seperti ini:

body {
  background-image: url("paper.gif");
}

Catatan: Saat menggunakan gambar latar belakang, gunakan gambar yang tidak mengganggu teks.

Gambar Latar Belakang - Ulangi Secara Horisontal atau Vertikal

Secara default, properti gambar latar mengulangi gambar baik secara horizontal dan vertikal.

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

body {
  background-image: url("gradient_bg.png");
}

Masukan contoh gambar....

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

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

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

Gambar Latar Belakang - Tetapkan posisi dan jangan ulangi

Menampilkan gambar latar hanya satu kali juga ditentukan oleh properti pengulangan latar:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

Pada contoh di atas, gambar latar belakang ditampilkan di tempat yang sama dengan teks. Kami ingin mengubah posisi gambar, sehingga tidak terlalu mengganggu teks.

Posisi gambar ditentukan oleh properti-posisi latar belakang:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Gambar Latar Belakang - Posisi tetap

Untuk menentukan bahwa gambar latar belakang harus diperbaiki (tidak akan bergulir dengan sisa halaman), gunakan properti lampiran-latar belakang:

<!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>Hello World!</h1>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>

</body>
</html>

Latar Belakang - Properti singkatan

Untuk mempersingkat kode, dimungkinkan juga untuk menentukan semua properti latar belakang dalam satu properti tunggal. Ini disebut properti steno.

Properti singkatan untuk latar belakang adalah latar belakang:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Saat menggunakan Properti singkatan urutan nilai properti adalah:

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

Tidak masalah jika salah satu nilai properti hilang, asalkan yang lain berada dalam urutan ini.

Semua Tentang Properti Background CSS:

Tag	Description
background	Setel semua properti latar belakang dalam satu deklarasi
background-attachment	Setel apakah gambar latar belakang diperbaiki atau gulir dengan sisa halaman
background-clip	Menentukan area lukisan latar belakang
background-color	Mengatur warna latar belakang suatu elemen
background-image	Mengatur gambar latar belakang untuk suatu elemen
background-origin	Menentukan di mana gambar latar belakang diposisikan
background-position	Mengatur posisi awal gambar latar
background-repeat	Menetapkan bagaimana gambar latar akan diulang
background-size	Menentukan ukuran gambar latar belakang

Lihat Tutorial Lengkap Tentang CSS Disini:
1. Artikel: Tutorial CSS
2. Playlist Youtube: Tutorial CSS Dasar

Nusantara Coding

Cari Blog Ini