Mengatur Background Website dengan CSS

Tutorial kali ini akan menunjukkan cara mengatur background halaman website dengan CSS. Background website dapat tampil secara penuh satu halaman layar, background dengan gambar ber-resolusi kecil dapat di repeat/ulang agar memenuhi seluruh tampilan, background bisa diatur perulangannya, background gambar bisa diatur posisinya.
Nah dari semua itu background untuk desain website dapat kita atur lebih lanjut dan sesuai keinginan. Berikut saya berikan script-nya.

Fullscreen Background

body {
     background-image : url('images/bgr.jpg'); /*source gambar background*/
     background-size : cover; /*untuk mengatur ukuran background*/
     -webkit-background-size : cover; /*untuk mengatur ukuran background*/
     -moz-background-size : cover; /*untuk mengatur ukuran background*/
     -o-background-size : cover; /*untuk mengatur ukuran background*/
}

Fixed Background

Background akan tetap pada posisinya ketika dilakukan scrolling maupun zooming.

body {
     background-image : url('images/bgr.jpg'); /*source gambar background*/
     background-attachment : fixed; /*untuk mengatur fixed background*/
}

Background Position

Posisi background sebuah gambar/image yang digunakan akan diposisikan di tengah class konten.

.konten {
     background-image : url('images/bgr.jpg'); /*source gambar background*/
     background-position: center; /*untuk mengatur posisi background*/
}

Perulangan Background / Background Repeat

Untuk melakukan perulangan background gambar menggunakan background-repeat. Perulangan bisa diatur berdasarkan sumbu yaitu x dan y. Browser akan secara otomatis me-repeat berdasarkan sumbu x dan y background Anda jika tidak memenuhi ukuran div maupun layar/body.

body {
     background-image : url('images/bgr.jpg'); /*source gambar background dgn ukuran misal 10px X 10px*/
     background-repeat : repeat-x; /*untuk mengatur perulangan background berdasarkan sumbu x*/
}

Jika perulangan berdasarkan sumbu y maka background-repeat : repeat-y;
Jika tidak ingin ada perulangan background maka gunakan  background-repeat : no-repeat;

 Sampai disini tutorial saya mengatur background website dengan CSS. Sekiranya cukup untuk memodifikasi background website Anda agar sesuai dengan desain dan keinginan. Semoga bermanfaat dan terus berkreasi :)