Sebenarnya, berbicara tentang image dalam CSS, maka kita sedang membicarakan background-image. Bagaimana menggunakan sebuah gambar menjadi background untuk suatu elemen. Pada bagian ini anda akan mempelajari penggunaan background-image, teknik sprite, dan background-repeat.
background-image
Untuk memanggil gambar sebagai background dari elemen, kita gunakan property background-image. Perhatikan contoh penggunaan property ini :
background-image : url ("images/background.jpg");
Ketika anda menggunakan gambar dengan ukuran kecil maka anda akan melihat background ditampilkan secara berulang untuk memenuhi seluruh element tersebut.
Tersedia di Bacacoding:
Tersedia di Bacacoding:
Untuk percobaan buatlah file dengan nama background.html dan selanjutnya buatlah sebuah div, dan menentukan ukuran width dan heightnya.
<div id = "box"></div>
Dan tambahkan style/CSS seperti berikut :
#box{
width : 1278px;
height :600px;
background : url(namagambaranda.png);
}
Berikut Contoh Kode Lengkapnya:
<!DOCTYPE html>
<html>
<head>
<title>BakgroundI Image CSS</title>
<style>
#box{
width : 1278px;
height :600px;
background : url(blognew.png);
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
Hasil dari kode diatas adalah:
Nah Bagaimana…? apakah sekarang kamu sudah mengerti Cara Membuat Background Gambar dengan CSS (background-image)? Mungkin itu saja tulisan yang membahas tentang Cara Membuat Background Gambar dengan CSS (background-image), jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon