Membuat Image Background Tidak Berulang

Sebelumnya saya sudah membahas tentang membuat background image. Sekarang kita lanjut ke bagian kedua membuat background image. Sobat siapkan image dan buat file html baru kemudian ketikan kode berikut ini : (Sobat juga bisa gunakan file html kemarin yang membuat background image)

<html>
<head>
<title>Background Gambar</title>
</head>
<body style="background-image:url(https://scontent-sit4-1.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/12592422_1306737192686610_661200009051139939_n.jpg?oh=80899a05196c820e79cd0d060d261a28&oe=57406000)"></style>
ISI HALAMAN DISINI
</body>
</html>

Simpan filenya dengan nama background.html kemudian buka file tersebut
maka hasilnya akan seperti ini :

Coba lihat background imagenya, apakah lebih dari 1 imagenya ?
Sekarang coba lihat yang saya buat yang kedua, hasilnya :

Terlihatkan perbedaannya? yang pertama dibuat imagenya lebih dari 1 dan yang kedua imagenya cuma 1.
Tenang sobat juga bisa membuatnya seperti yang kedua. Sobat tinggal gantikan kode berikut ini :

<body style="background-image:url(https://scontent-sit4-1.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/12592422_1306737192686610_661200009051139939_n.jpg?oh=80899a05196c820e79cd0d060d261a28&oe=57406000)"></style>

menjadi :

<style>
body
{
background-image:url(https://scontent-sit4-1.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/12592422_1306737192686610_661200009051139939_n.jpg?oh=80899a05196c820e79cd0d060d261a28&oe=57406000);
background-size : 100% 100%;
background-repeat : no-repeat;
background-attachment : fixed;
background-position : justify;
}
body, td, th {
color: #ffffff;
}
</style>

Maka hasilnya akan sama seperti yang saya buat yang kedua.
Sobat juga bisa merubah posisi, ukuran gambar dan juga imagenya berulang(lebih dari 1).

Untuk merubah ukuran image, sobat tinggal ubah kode ini :

background-size : 100% 100%; (100% 100% ini adalah Width dan Height, Sobat bisa merubahnya sesuai selera sobat)

Untuk merubah posisi image, sobat tinggal rubah kode ini :

background-position : justify; ( Sobat bisa merubahnya menjadi left / right / center / justify / top / bottom)

Untuk merubah iamgenya berulang atau tidak, sobat rubah kode ini atau sobat juga bisa mengahusnya :

background-repeat : no-repeat; (rubah menjadi repeat atau bisa juga di hapus kodenya)

Sobat juga bisa menghapus atau merubah warna kode ini :

body, td, th {
color: #ffffff;
}

kode ini hanya berfungsi bila dihalaman sobat terdapat sebuah tabel.

So bagaimana sobat cukup jelas penjelasannya? bila kurang jelas sobat bisa tanyakan kepada saya.

Membuat Image Background Tidak Berulang

0 Response to "Membuat Image Background Tidak Berulang"

Post a Comment