Teknik Dasar merubah Background dengan CSS

Tampilan sebuah website atau blog tidak lepas dari pemilihan latar / background. Untuk membangun halaman web yang menarik tentu saja kita harus memahami teknik pengaturan background. Dibawah ini saya mencoba berbagi tentang bagaimana teknik dasar merubah background dengan CSS.

Single colour background

body {
    background-color : #BA55D3;
}

Dengan menambahkan style pada bagian body, anda dapat merubah warna latar dari website atau blog.

Repeating background pattern

body {
    background-color: #BA55D3;
    background-image: url(repeat-bg.jpg);
}

Penambahan gambar tektur yang berulang akan membuat halaman website / blog menjadi semakin berwarna. Pola gambar haruslah bersih dan mulus, agar pengulangan gambar tidak terlihat sambungannya. Untuk mengatasi gambar latar yang tidak ter-loading, sebaiknya background warna juga ditetapkan.

Contoh Gambar Pattern :

Horizontally repeating background

body {
    background-color: #BA55D3;
    background-image: url(bgrepeatcolor.jpg);
    background-repeat: repeat-x;
}

Teknik ini menggunakan gambar yang berulang di satu sisi, baik itu digaris x ataupun digaris y. Sebagai contoh saya menggunakan background repeat digaris x. Pastikan bahwa sisi bawah gambar memiliki warna yang sama dengan warna latar.

Contoh Gambar :

Large background image

body {
margin-top: 150px;
    background-color: #BA55D3;
    background-image: url(bg-big-size.jpg);
    background-position: center top;
    background-repeat: no-repeat;
}

Teknik ini membutuhkan gambar yang sangat besar. Dimensi gambar haruslah lebih besar dari resolusi monitor yang digunakan, jika tidak nantinya akan terlihat batas gambar yang digunakan. Seperti contoh yang digunakan, saya menggunakan dimensi 1200 x 900 px.

Contoh Gambar Latar :