CSS3 Background

Cara Menggunakan Image Background pada CSS3

Di halaman ini melanjutkan artikel sebelum nya yaitu : Sintaks-sintaks yang berlaku pada CSS3. Pada halaman sebelum nya kita belajar tentang cara membuat Border pada CSS3 yaitu :

border-radius
border-shadow
border-image

Disini kita akan belajar tentang elemen background. Oke langsung saja kita belajar menggunakan Image Background pada CSS3.

CSS3 memiliki beberapa background porperties baru disbanding dengan versi sebelumnya yang memungkinkan kita dalam maksimalisasi kontrol dari elemen background. Di halaman ini kita akan mempelajari :

Property yang di gunakan adalah sebagai berikut :

Keterangan :

Pada Firefox 3.6 dan sebelumnya tidak men support fasilitas background-origin dan memerlukan prefix –moz- untuk men support fasilitas background-property
Safari 4 sendiri memerlukan prefix –webkit- untuk bisa support fasilitas diatas
Internet Explorer 9, Firefox 4, Chrome, Safari 5 dan Opera telah support fasilitas background

Property dari fasilitas background

Property dari fasilitas borders
Property	Description	Values
border-image	Sebuah wadah untuk mensetting seluruh property dari border-image	-source: none\|image; -slice: number\| % \| fill; -width: number \| % \| auto; -outset: length \| number; -repeat: stretch \| repeat \| round;
border-radius	Sebuah wadah untuk mensetting seluruh dari 4 ujung-ujung border (radius)	length %
box-shadow	Menempelkan satu atau lebih efek bayangan pada border	h-shadow v-shadow blur spread color inset

Contoh implementasi background size

Mengubah ukuran gambar

Ini adalah contoh untuk mengubah ukuran gambar menjadi lebih kecil.

<!DOCTYPE HTML >

<html>

<head>

body

{

background:url(images/img_flwr.gif);

background-size:80px 60px;

-moz-background-size:80px 60px; /* Firefox 3.6 */

background-repeat:no-repeat;

padding-top:40px;

}

</style>

</head>

<body>

<p>

Hasil dari pengubahan ukuran dari gambar menjadi lebih kecil

</p>

<p>Original image: <img src="images/img_flwr.gif" alt="Flowers" width="224" height="162" /></p>

</body>

</html>

Hasil nya seperti ini :

Membuat gambar menjadi full background

Ini adalah contoh untuk Membuat gambar menjadi full background

<!DOCTYPE HTML >

<html>

<head>

div

{

background:url(img_flwr.gif);

background-size:100% 100%;

-moz-background-size:100% 100%; /* Firefox 3.6 */

background-repeat:no-repeat;

}

</style>

</head>

<body>

<div>

Hasil dari percobaan background menggunakan salah satu gambar yang telah disediakan sebelumnya. Untuk merubah properties background, coba ubah nilai persen dari klausa background-size. Karena pada klausa background-repeat diisi dengan no-repeat, maka pada web hanya akan tampak satu (tunggal) gambar.

</div>

</body>

</html>

Hasil nya seperti ini :

CSS3 background origin

Fasilitas background origin menentukan posisi area untuk sebuah gambar yang akan dijadikan background (background-image). Background-image dapat ditempatkan di dalam area content-box, padding-box atau border-box

Contoh impelentasi background-origin

<!DOCTYPE HTML >

<html>

<head>

div{

border:5px solid black;

padding:55px;

background-image:url('images/bintang.png');

background-repeat:no-repeat;

background-position:left;

}

#div1{

background-origin:border-box;

}

#div2{

background-origin:content-box;

}

#div3{

background-origin:padding-box;

}

</style>

</head>

<body>

<p>background-origin:border-box:</p>

Sesi background-origin, dalam area ini gambar akan tampil di area border-box, dimana background image akan menempel pada border. Itulah maksud dari istilah border-box.

</div>

<p>background-origin:content-box:</p>

Sesi background-origin, dalam area ini gambar akan tampil di area content-box, dimana background image akan muncul dibelakang teks/content yang ditulis.

</div>

<p>background-origin:padding-box:</p>

Sesi background-origin, dalam area ini gambar akan tampil di area padding-box, dimana ada ruang antara border dengan content, disanalah yang disebut dengan area padding-box.

</div>

</body>

</html>

Hasil nya akan seperti ini :

Itu adalah Cara Menggunakan Image Background pada CSS3

Baca artikel lain nya tentang HTML5 dan CSS3 disini