Background image merupakan salah satu background property yang cukup disukai karena mampu menghadirkan "sesuatu yang tak mampu diciptakan melalui background color property". Tak dapat dipungkiri karena memang hampir semua fungsi backgroud color dapat digantikan oleh background image, sedangkan background color tak mampu menggantikan hampir sebagian besar peran yang mampu diberikan oleh sebuah background image. Sebagai contoh adalah background image mampu menghadirkan sebuah background berupa gambar pemandangan pegunungan dengan detail lengkap disertai berbagai pohon dan gunung serta burung yang terlihat sedang terbang tak mungkin dibuat atau digantikan melalui background color property.
Jenis file yang umum digunakan sebagai background image
Secara umum ada 3 jenis file image yang biasa digunakan sebagai background image.- .jpg
File berekstensi jpg banyak digunakan untuk background image berukuran besar atau image yang membutuhkan detail warna lengkap. File berekstensi .jpg bersifat padat (tak transparan). - .gif
File berekstensi .gif dibutuhkan untuk background image dengan detai warna tak banyak, gambar/background image berukuran kecil, berbentuuk animasi atau transparan. - .png
Hampir tak berbeda jauh dengan file background image berekstensi .gif, hanya saja file berbentuk png tak dapat digunakan untuk background image animasi seperti halnya animasi gif. Transparansi yang sempurna menjadi salah satu keunggulan file berekstensi png.
Cara penulisan kode background image
Ada 3 (tiga) metode penulisan background-image dimana ketiganya mempunyai fungsi sama. Kode yang bisa digunakan untuk background-image properti sbb:- background-image:url(image.jpg);
- background-image:url("image.jpg");
perhatikan entitas " - background-image:url('image.jpg');
perhatikan entitas '
Keterangan:
- Kode tersebut berlaku juga untuk file image berekstensi gif dan png.
- Kode backgroud image seperti diatas akan selalu memberlakukan background image sebagai background image berulang/repeat. Pengaturan pengulangan atau tidaknya background image dilakaukan melalui background repeat property.
Cara penulisan kode background image dan pengulangan background
Keterangan:
Anda dapat membaca di background repeat property.Cara penulisan kode background image dan positioning
Keterangan:
Anda dapat membaca di background position property & background attachment property.<style type="text/css">
.gubhukrusak-1{
width:250px;
height:150px;
border:5px solid blue;
margin:20px auto 0;
background-image: url(https://lh3.googleusercontent.com/-rMeHTv9mI_Q/UCKgdWPr_pI/AAAAAAAAN6U/8jFFkiy71J0/w250-h150-n-k/IMG_2764.JPG);
}
.gubhukrusak-2{
width:250px;
height:150px;
border:double orange 11px;
margin:20px auto 0;
background-image: url('https://lh3.googleusercontent.com/-rMeHTv9mI_Q/UCKgdWPr_pI/AAAAAAAAN6U/8jFFkiy71J0/w250-h150-n-k/IMG_2764.JPG');
font-size:2em;
color:#fff;
text-align:center;
}
.gubhukrusak-3{
width:250px;
height:150px;
border:5px solid blue;
margin:20px auto 0;
background-image: url("https://lh3.googleusercontent.com/-rMeHTv9mI_Q/UCKgdWPr_pI/AAAAAAAAN6U/8jFFkiy71J0/w250-h150-n-k/IMG_2764.jpg");
font-size:2em;
color:yellow;
text-align:center;
line-height:150px;
border-radius:15px;
}
.gubhukrusak-4{
width:250px;
height:300px;
border:5px dotted red;
margin:20px auto 0;
background-image: url('https://lh3.googleusercontent.com/-rMeHTv9mI_Q/UCKgdWPr_pI/AAAAAAAAN6U/8jFFkiy71J0/w250-h150-n-k/IMG_2764.JPG');
font-size:2.5em;
color:lime;
text-align:center;
line-height:300px;
}
.gubhukrusak-5{
width:98%;
height:300px;
border:ridge red 10px;
margin:20px auto 0;
background-image: url(https://lh3.googleusercontent.com/-rMeHTv9mI_Q/UCKgdWPr_pI/AAAAAAAAN6U/8jFFkiy71J0/w250-h150-n-k/IMG_2764.jpg);
}
</style>
<div class="gubhukrusak-1">gubhukrusak-1</div> <div class="gubhukrusak-2">gubhukrusak-2</div> <div class="gubhukrusak-3">gubhukrusak-3</div> <div class="gubhukrusak-4">gubhukrusak-4</div> <div class="gubhukrusak-5">gubhukrusak-5</div>
Di bawah ini ada aplikasi background image. Edit kode untuk mendapatkan hasil berbeda!
Please click the button to display. Continue with editing code and click to see the results!
hallo, mohon maaf sebelumnya.
BalasHapussaya mau tanya dong, klo list-style-image: url(''); di gunain untuk apa ya ? trus untuk keterangan url itu apa ? pencarian gambar dari suatu situs google atau apa ? dan klo saya mau masukkin gambar dari folder yang udah ada di folder kita bisa apa nggk ? soalnya saya udah coba tapi nggk bisa tampil. bentuk source codenya gini
.categories li{
padding-bottom: 6px;
border-bottom:dotted 1px #333;
list-style-image: url('cekk.png');
}
cuma nggk tampil hasilnya hehehe