Yap,,kali ini saya akan bahas mengenai bagaimana menambahkan background dengan CSS. Namun, sebelumnya ini beberapa hal tentang background yang perlu kamu tau, dan mungkin kamu sudah tau hal-hal ini:

1. Background dapat berupa warna ataupun gambar, atau bahkan bisa terdiri dari dua unsur tersebut.

2. Kamu bisa ngasih background di elemen HTML manapun, kamu tinggal ubah-ubah selectornya aja.

Ada 6 property di CSS,yang bisa digunakan untuk menambahkan background pada dokumen HTML kita, yaitu background-color, background-image, background-attachment, background-position, background-repeat, dan background. Saya jelasin satu-satu ya

1. background-color

Sesuai namanya, guna dari property ini adalah memberi warna pada background. Value dari property ini ya warna-warna yang ingin diberikan pada background.

Contohnya:

body{
     background-color:#000000;
}

Kode CSS di atas akan membuat tag body memiliki background berwarna hitam (#000000 = hitam).

2. background-image

Kalo property yang ini berguna untuk membuat image/gambar menjadi background. Valuenya seperti ini

url(letak gambar).

Contohnya, saya ingin membuat gambar “bg.png” menjadi background dari tag body yang terletak di folder images (folder images dan file HTMLnya ada dalam satu folder), maka CSSnya jadi seperti ini:

body{
     background-image: url(images/bg.png);
}

3. background-attachment

Kamu pernah liat situs yang kalo situsnya discroll backgroundnya gak ikutan ke scroll, nah itu contoh salah satu pemakaian property background-attachment dengan value fixed. Value dari background-attachment yang laen namanya scroll, klo yang ini kebalikannya dari fixed.

Contohnya, misal pada contoh background-image, saya pengen gambar bg.png tidak berubah/tetap di posisinya ketika di scroll, maka saya tinggal menambahkan property background-attachment di kode CSSnya:

body{
     background-image: url(images/bg.png);
     background-attachment:fixed;
}

4. background-position

Posisi dari background dapat kamu atur dengan property ini. Valuenya bisa top, center, bottom, right, atau bisa juga kamu set sendiri menjadi berapa pixel,em, atau persen.

Contoh :

body{
      background-image: url(images/bg.png);
      background-attachment:fixed;
      background-position: top;
}

5. background-repeat

Property ini gunanya untuk mengulang gambar pada background jika width atau height dari gambar tersebut lebih kecil dari halaman HTML yang dibuat. Untuk valuenya ada repeat, no-repeat, repeat-x, repeat-y.

Klo valuenya repeat, gambarnya akan diulang terus sampai halamannya penuh, klo no-repeat gambar tidak akan diulang, repeat-x akan membuat gambar diulang secara horizontal aja sedangkan value repeat-y akan mengulang gambar secara vertikal. Secara default klo kamu gak ngeset value dari property ini maka valuenya otomatis adalah repeat.

Contohnya:

body{
      background-image: url(images/bg.png);
      background-attachment:fixed;
      background-position: top;
      background-repeat: no-repeat;
}

6. background

Nah, klo property background berguna untuk mempersingkat penulisan property-property yang ada di atas. Misalnya pada contoh property background-repeat, kamu bisa menuliskannya hanya dengan begini:

body{
    background: url(images/bg.png) fixed top no-repeat;
}

Ingat setiap value dipisahkan dengan spasi.