membuat Background website dari CSS

advertisment

Selamat datang di blog Panduan Belajar Website Lengkap . Berikut ini adalah update artikel terbaru mengenai informasi tentang membuat Background website dari CSS silahkan untuk membaca dengan seksama dan mohon untuk disikapi dengan bijaksana mengenai informasi di artikel membuat Background website dari CSS , semoga artikel tentang membuat Background website dari CSS dapat menambah wawasan serta info yang anda cari atau butuhkan.

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

Terima Kasih Atas Kunjungan Anda | Semoga informasi dari Blog ini dapat bermanfaat bagi Anda
Judul: membuat Background website dari CSS
Ditulis Oleh ndesain.web.id
Tulisan ini memberikan informasi yang bermanfaat untuk anda? Jika mengutip harap berikan link yang menuju ke artikel ini ataupun langsung ke artikel sumber membuat Background website dari CSS. Sebarkanlah jika artikel ini bermanfaat menggunakan link share sosial media di bawah. Terima kasih atas kunjungannya, jangan lupa untuk membaca related post menarik lainnya