Properti background repeat berfungsi untuk menciptakan efek pengulangan pada penggunaan image sebagai background (background image property). Dengan fungsi tersebut background repeat property dimanfaatkan untuk melengkapi fungsi yang berlaku pada background image property. Sebuah background image dapat diatur untuk ditampilkan sebagai background tunggal atau background berulang.
Pengulangan background image
Ditinjau dari cara penulisan kode, fungsi dan kegunaannya, background repeat property dapat dibedakan menjadi:- background-repeat:no-repeat : Berfungsi membuat background tunggal (tak berulang).
- background-repeat:repeat; Membuat background berulang dalam arah vertical dan horizontal. Dalam penggunaannya kode "background-repeat:repeat;" seringkali tak dituliskan karena tanpa kode tersebut secara otomatis sebuah background image akan berfungsi sebagai background berulang.
- background-repeat:repeat-x; Membuat background berulang secara horizontal.
- background-repeat:repeat-y; Membuat background berulang secara vertical.
Kode background image property dan background repeat property
Penggunaan background repeat property tak dapat berdiri sendiri karena kode ini hanya berfungsi sebagai pengatur "berulang tidaknya background" dan "arah pengulangan background". Menggabungkannya dengan background image property barulah fungsinya dapat dirasakan.Metode Penulisan Kode
background-image:url("image.jpg");
background-repeat:no-repeat;Kode lebih lengkap
<style type="text/css>
h1{
padding:40px 0;
font-size:50px;
color:#fff;
font-weight:bold;
text-align:center;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7D-_LNvDFNPZ23cF2jtywSspX7P8uzottDFDo2jW5A2ooIBonx0W5LSYzmx_ki9HHNJT87TufWF5hwHVkJLrPrJnCbpiMP9A_nr_EjnQXjd_5ooiyoQGZ1QzmZ6W0nrF-Zelfdws-LS8/');
background-position:center;
}
div.mybox-01{
width:600px;
height:250px;
margin:30px auto 0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7D-_LNvDFNPZ23cF2jtywSspX7P8uzottDFDo2jW5A2ooIBonx0W5LSYzmx_ki9HHNJT87TufWF5hwHVkJLrPrJnCbpiMP9A_nr_EjnQXjd_5ooiyoQGZ1QzmZ6W0nrF-Zelfdws-LS8/h120/bird-01-400x250.jpg');
background-repeat:no-repeat;
}
div.mybox-02{
width:600px;
height:250px;
margin:30px auto 0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7D-_LNvDFNPZ23cF2jtywSspX7P8uzottDFDo2jW5A2ooIBonx0W5LSYzmx_ki9HHNJT87TufWF5hwHVkJLrPrJnCbpiMP9A_nr_EjnQXjd_5ooiyoQGZ1QzmZ6W0nrF-Zelfdws-LS8/h120/bird-01-400x250.jpg');
}
div.mybox-03{
width:600px;
height:250px;
margin:30px auto 0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7D-_LNvDFNPZ23cF2jtywSspX7P8uzottDFDo2jW5A2ooIBonx0W5LSYzmx_ki9HHNJT87TufWF5hwHVkJLrPrJnCbpiMP9A_nr_EjnQXjd_5ooiyoQGZ1QzmZ6W0nrF-Zelfdws-LS8/h120/bird-01-400x250.jpg');
background-repeat:repeat;
}
div.mybox-04{
width:600px;
height:250px;
margin:30px auto 0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7D-_LNvDFNPZ23cF2jtywSspX7P8uzottDFDo2jW5A2ooIBonx0W5LSYzmx_ki9HHNJT87TufWF5hwHVkJLrPrJnCbpiMP9A_nr_EjnQXjd_5ooiyoQGZ1QzmZ6W0nrF-Zelfdws-LS8/h120/bird-01-400x250.jpg');
background-repeat:repeat-x;
}
div.mybox-05{
width:600px;
height:500px;
margin:30px auto 0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7D-_LNvDFNPZ23cF2jtywSspX7P8uzottDFDo2jW5A2ooIBonx0W5LSYzmx_ki9HHNJT87TufWF5hwHVkJLrPrJnCbpiMP9A_nr_EjnQXjd_5ooiyoQGZ1QzmZ6W0nrF-Zelfdws-LS8/h120/bird-01-400x250.jpg');
}
div.mybox-06{
width:600px;
height:500px;
margin:30px auto 0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7D-_LNvDFNPZ23cF2jtywSspX7P8uzottDFDo2jW5A2ooIBonx0W5LSYzmx_ki9HHNJT87TufWF5hwHVkJLrPrJnCbpiMP9A_nr_EjnQXjd_5ooiyoQGZ1QzmZ6W0nrF-Zelfdws-LS8/h120/bird-01-400x250.jpg');
background-repeat:repeat-y;
}
div.mybox-07{
width:600px;
height:500px;
margin:30px auto 0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7D-_LNvDFNPZ23cF2jtywSspX7P8uzottDFDo2jW5A2ooIBonx0W5LSYzmx_ki9HHNJT87TufWF5hwHVkJLrPrJnCbpiMP9A_nr_EjnQXjd_5ooiyoQGZ1QzmZ6W0nrF-Zelfdws-LS8/h120/bird-01-400x250.jpg');
background-repeat:no-repeat;
background-position:center center;
}
</style>
<h1>background repeat - h1</h1> <h4>mybox-01 : background-repeat:no-repeat;</h4> <div class="mybox-01"></div> <h4>mybox-02 : background-repeat:repeat;</h4> <div class="mybox-02"></div> <h4>mybox-03 : tanpa background-repeat </h4> <div class="mybox-03"></div> <h4>mybox-04 : background-repeat:repeat-x; </h4> <div class="mybox-04"></div> <h4>mybox-05 : tanpa kode background-repeat </h4> <div class="mybox-05"></div> <h4>mybox-06 : background-repeat:repeat-y; </h4> <div class="mybox-06"></div> <h4>mybox-07 : background-repeat:no-repeat;background-position:center center;</h4> <div class="mybox-07"></div>
Keterangan:
Mempelajari background repeat property mengharuskan anda untuk sekaligus mempelajari background image property, background position property, background attachment property dan background size property.Di bawah ini ada beberapa contoh syntax. Edit kode untuk mendapatkan hasil berbeda!
Please click the button to display. Continue with editing code and click to see the results!
Kalau di script php saya ada peting koma dan aku masukkan script (background-repeat: no-repeat;) tapi tidak berfungsi, apakah harus ditambahin petik koma juga menjadi ("background-repeat: no-repeat;") atau gimana ya? :)
BalasHapusbetul gan, klo inject ke php metode callingnya udah pke inline..
BalasHapuskalo di artikel ini .css-nya di header...
good job gan
BalasHapuslampu servis hp led