Background CSS

 

 Background Color

background-color digunakan untuk mengubah background suatu element.
untuk mengubah background halaman seperti ini :

body {
background-color: blue;
}

Beberapa cara menentukan warna :

• Menggunakan Nama Warna - Contoh "red"
• HEX value - Contoh "#ff0000"
• RGB value - Contoh "rgb(255,0,0)"

 Kita dapat mengubah background <h1>, <p>, dan <div> dalam background yang berbeda Contoh :

h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}

Background Gambar

Untuk membuat background gambar gunakan property background-image pada element yang ingin diubah.
Gambar secara default mengalami pengulangan.
Contoh :
 

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

*Note : ganti paper.gif menjadi nama file gambarnya, jika online ganti dengan link gambarnya.

Repeat Image

Secara default gambar direpeat horizontal dan vertical.
Gunakan property background-repeat untuk mengatur pengulangan gambarnya.
Contoh repeat horizontal:

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

*Note : Ganti value(repeat) degan repeat-y jika ingin pengulangan vertical. ubah menjadi no-repeat jika tidak ingin ada pengulangan gambar.

Background Position

Untuk mengatur posisi gambar gunakan property background-position :

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

*Note : Ubah value(right top) menjadi posisi yang di inginkan. Misalkan right, left, top, botto.

Background Position-fixed

 Untuk membuat gambar tetap pada tempatnya(jka di scroll tidak berubah tempat) menggunakan properti background-attachment.
Contoh :
 

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

Background - Shorthand property

Shorthand Property yaitu tekhnik untuk memperpendek script, dengan menulis semua background property ke dalam 1 property.
Contoh :
 

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

Ketika Menggunakan Shorthand Property, property yang ditulis harus berurutan :

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Tidak masalah jika ada property yang dihilangkan selama urutan propertynya masih seperti diatas