CSS background gambar original `

Bagaimanakah cara memberi / menempatkan sebuah background gambar original anda pada tag div element blog anda

---

seperti yang kita ketahui bahwa
CSS background origin / gambar asli ini sangatlah penting untuk melengkapi bagian dari Element - element di blog anda .
CSS background original ini bisa anda tempatkan pada bagian - bagian tertentu menurut aturan Css yang anda buat . oya ,,jika anda yang belum baca artikel sebelumnya yaitu cara merubah ukuran background gambar silahkan anda baca disini resize background image jika sudah kita lanjutin tutorrialnya ..
property yang kita gunakan yaitu background-origin dan value nya padding-box | content-box | border-box

Tip :background-origin:padding-box | content-box | border-box
background-repeat:no-repeat
background-position:center center | left | left top | left bottom | top

selengkapnya anda bisa lihat pada tabel dibawah :

property	browser support
background-origin	mozilla
	opera
	chrome dan safari
	Internet Explore

semua browser support property background-origin kita akan membuat contoh untuk background gambar original dengan value padding-box .

ini adalah hasil dari background origin padding-box ini adalah hasil dari background origin padding-box ini adalah hasil dari background origin padding-box ini adalah hasil dari background origin padding-box

hasil di atas sebagai berikut kodenya :

<style>.bgOrigin1{width:70%;margin:20px;padding:10px 10px 10px 25px;border:2px dotted darkGreen;font-size:100%;color:black;background:url(https://sites.google.com/site/mas4nton/blognya-mastony/bulb.png);background-repeat:no-repeat;background-position:-2px 25px;background-origin:padding-box;}</style>
<div class="bgOrigin1">
ini adalah hasil dari background origin padding-box ini adalah hasil dari background origin padding-box ini adalah hasil dari background origin padding-box ini adalah hasil dari background origin padding-box</div>

---

sekarang kita akan membuat element dengan
background origin dengan value content-box .

contoh tulisan dengan latar belakang background origin dan content-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan content-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan content-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan content-box sebagai valuenya

dan hasil di atas sebagai berikut kodenya :

<style>.bgOrigin2{width:400px;height:300px;margin:20px;padding:0;border:2px solid darkGreen;font-size:100%;color:black;background:url(https://sites.google.com/site/mas4nton/blognya-mastony/bunga.jpg);background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;background-origin:content-box;}</style><div class="bgOrigin2">contoh tulisan dengan latar belakang background origin dan content-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan content-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan content-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan content-box sebagai valuenya</div>

gambar original :

---

sekarang kita akan membuat element dengan background origin dan valuenya border-box .

contoh tulisan dengan latar belakang background origin dan contoh tulisan dengan latar belakang background origin dan border-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan border-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan border-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan border-box sebagai valuenya

dan hasil dari diatas sebagaiberikut codenya :

<style>div.bgborder{padding:30px;border:1px solid green;width:70%;margin:20px;font-size:100%;color:black;background-position:left;background:url(https://sites.google.com/site/mas4nton/blognya-mastony/bulb.png)no-repeat;}.bgOrigin3{background-origin:border-box;}</style>
<div class="bgborder">
<div class="bgOrigin3">
contoh tulisan dengan latar belakang background origin dan contoh tulisan dengan latar belakang background origin dan border-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan border-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan border-box sebagai valuenya contoh tulisan dengan latar belakang background origin dan border-box sebagai valuenya</div>
</div>

dan sampai disini tentang tutorial background gambar original semoga bermanfaat .

Terima kasih Anda telah membaca Artikel mengenai CSS background gambar original dan Kata kunci untuk Artikel ini yaitu CSS background gambar original