CSS background gambar ( repeat )

apakah anda ingin menempatkan / memberi sebuah background element dengan gambar .. lalu apa itu css background repeat ..?

anda akan jadi sangat mudah dengan css background-repeat . Anda dapat mengubah jumlah gambar dalam suatu background yang berjumlah banyak / diperluas dan andapun juga dapat mengontrol background gambar anda pada bagian - bagian tertentu menurut value dari property background-repeat , untuk lebih lanjut silahkan lihat tabel di bawah ini :

value	keterangan
repeat	background akan di ulang (y + x )
repeat-y	background akan di ulang dari atas ke bawah
repeat-x	background akan di ulang dari kiri ke kanan
no-repeat	background tidak akan di ulang

background-image:url( lokasi gambar disimpan )
background-repeat:no-repeat | repeat | repeat-y | repeat-x

background-repeat dengan value repeat

contoh kita akan membuat box berukuran lebar 350px dan tinggi 300px dan valuenya repeat.

dan hasil box di atas seperti berikut ini kode pembuatannya .

<style>.bgrepeat{width:350px;height:300px;background-image:url(https://sites.google.com/site/mas4nton/blognya-mastony/social_balloon_green.png);background-repeat:repeat;}</style>
<div class="bgrepeat"></div>

Gambar original

background-repeat dengan value repeat-y

kita akan membuat sebuah box berukuran lebar 350px dan tinggi 300px dengan value repeat-y 

dan hasil box di atas seperti berikut ini kode pembuatannya .

<style>.bgrepeaty{width:350px;height:300px;background-image:url(https://sites.google.com/site/mas4nton/blognya-mastony/social_balloon_green.png);background-repeat:repeat-y;}</style>
<div class="bgrepeaty">
</div>

background-repeat dengan value repeat-x

kita akan membuat sebuah box berukuran lebar dan tinggi yang sama seperti di atas dengan value repeat-x

dan hasil box di atas seperti berikut ini kode pembuatannya .

<style>.bgrepeatx{width:350px;height:300px;background-image:url(https://sites.google.com/site/mas4nton/blognya-mastony/social_balloon_green.png);background-repeat:repeat-x;}</style>
<div class="bgrepeatx">
</div>

background-repeat dengan value no-repeat

dan yang terakhir yaitu background repeat dengan value no-repeat

dan hasil box di atas seperti berikut ini kode pembuatannya .

<style>.bgrepeatno{width:350px;height:300px;background-image:url(https://sites.google.com/site/mas4nton/blognya-mastony/social_balloon_green.png);background-repeat:no-repeat;background-position:center center;}</style>
<div class="bgrepeatno">
</div>

efek yang sama yang menggunakan aturan sorthan

<style>.bgrepeatno{width:350px;height:300px;background-image:url(https://sites.google.com/site/mas4nton/blognya-mastony/social_balloon_green.png) no-repeat center center;}</style>
<div class="bgrepeatno">
</div>

Artikel sebelumnya silahkan baca disini Css background gambar original dan untuk merubah background element blog silahkan baca disini merubah warna bacground blog atau mungkin anda memerlukan sudut lengkug / bundar silahkan baca disini sudut lengkug Rounded Corner
nah gimana tutorialnya tentang cara memberi background gambar ( background-repeat ) semoga bermanfaat .. jangan lupa klik like nya di tunggu lho ...