membuat Background website dari CSS

advertisment

ni Tips saya dapatkan dari teman blog yang Ilmunya sangat membantu saya dalam membuat background Website

CSS Background

Property backgound dari CSS ini digunakan untuk membuat efek background  pada elemen.
Terdapat beberapa property backgound:

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

background-color

Digunakan untuk memberikan warna background pada sebuah elemen.
Contoh:

body {
background-color:“blue”;
}
Property background-color ini bisa kita beri nilai dengan :

• Nama warna seperti “red”, “blue”, “white”.
• Nilai RGB seperti “rgb(255,0,0)”.
• Nilai Hexadesimal seperti “#ffffff”.

background-image

Digunakan untuk memberikan beckground gambar pada sebuah elemen.
Defaultnya-> gambar diulang-ulang secara horizontal dan vertikal sehingga dia memenuhi seluruh elemen.
Contoh:
body {
background-image:url(‘fahmi.png’);
}

Pengulangan Gambar

Background-image ini mempunyai dua bentuk pengulangan, yaitu:

• repeat-x yaitu pengulangan secara horizontal.
• repeat-y yaitu pengulangan secara vertikal.

Contoh:
Pengulangan secara horizontal:
body {
background-image:url(‘fahmi.png’);
background-repeat:repeat-x;
}
Keterangan:
Jadi untuk membuat pengulangan gambar kita membutuhkan property background-repeat.
Muncul Pertanyaan:
Jika saya tidak ingin mengulang image backgroundnya gimana … ?
Jawaban:
Kamu bisa memberi nilai pada property background-repeat dengan ‘no-repeat‘ seperti kode dibawah ini:
background-repeat:no-repeat;

background-attachment

Digunakan saat halaman web di scroll maka terdapat dua pilihan:

• fixed yaitu backgroundnya tetap walaupun user men-scroll halaman web.
  
• scroll yaitu background ikut terscroll ketika user mens-scroll halaman web.

Cara menggunakannya adalah seperti ini:
background-attachment:fixed;
background-attachment:scroll;
Jika tidak didefinisikan maka nilai defaultnya dari background-attachment adalah scroll.

Mengatur Posisi Background

Untuk mengatur letak background gambar maka CSS menyediakan property background-position.
Contoh:
Untuk Meletakkan posisi background gambar ditengah maka kamu bisa gunakan kode dibawah ini:
background-position:center;
Terdapat tiga pendefinisian nilai untuk property background-position yaitu:

• panjang yaitu dengan menggunakan angka disertai satuan pixel misal 20px 10px.
  
• Persentasi yaitu dengan menggunakan angka diikuti tanda persen misal 10% 20%.
  
• Keyword yaitu dengan menggunakan kata-kata misal top center.

Contoh:
Property background-position dengan menggunakan pixel:
background-position:20px 10px;
Keterangan:

• 20px adalah posisi horizontal
• 10px adalah posisi vertikal

Jadi nilai pertama adalah untuk posisi horizontal sedangkan nilai kedua untuk posisi vertikal.
Jika Tutorial ini bermanfaat silahkan katakan ‘Terima kasih Fahmi Basya Kartapura’.

advertisment