Pernah tidak teman-teman ketika kita menggunakan background dengan gambar tapi background gambar tersebut di ulang beberapa kali, itu biasanya di karenakan gambar tersebut size lebarnya kecil atau tidak selebar layar tampilan web brower maka dari itu akan di ulang beberapa kali, kejadian ini sebagian dari teman-teman pasti merasa sangat terganggu bukan, karena merasa tidak enak jika gambar di ulang-ulang. lalu bagaimana cara menanggulangi pengulangan gambar di sebuah website, kita akan bahas sesaat lagi, seperti biasa jangan kemana-mana ya teman-teman.
Untuk belajar cara menanggulangi pengulangan gambar di sebuah website, kita lagi-lagi membutuhkan bantuan dari property CSS ya teman-teman apa itu, ya benar sekali background-repeat tentunya, tentunya dengan background repeat kita bisa meberhentikan apakah background gambar akan di hentikan atau tidak, lalu apa valuenya, valuenya adalah no-repat ya teman-teman, tapi jika saya sarankan jika teman-teman ingin membuat pengulangan gambar, alangkah baiknya saya menyarankan menggunakan pattern ya teman-teman. Teman-teman bisa cari sendiri de search ya.
Oke kembali ke topik cara menanggulangi pengulangan gambar di sebuah website, saya akan mencontohkan dengan tampilan website yang saya buat kemarin tentang penggunaan background. oke langsung saja ya kita liat struktrur htmlnya:
<!DOCTYPE html>
<html>
<head>
<title>cara merubah background di sebuah website</title>
</head>
<-e-style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background: url("../htm5.jpg");
background-repeat: no-repeat; //ini dia propertynya
}
.container{
padding: 50px;
width: 800px;
margin: auto;
background: magenta;
}
h1{
background: green;
}
h3{
background: blue;
}
p{
background: yellow;
}
<-e/style>
<body>
<div class="container">
<h1>Ini Judul saya berikan background warna hijau</h1>
<h3>disini saya membuat sebuah container ya teman-teman, dimana saya memberi background juga dengan warna</h3>
<h3>jika body saya memberinya dengan gambar ya, supaya teman-teman tau perbedaanya</h3>
<p>jika ini adalah sebuah paragraph saya berikan warna kuning</p>
</div>
</body>
</html>
saya akan coba mencontohkan dari sebelum di berikan repeat dan sesudah di berika no-repeat.
Sebelum
Sesudah
bisa di lihat perbedaanya ya teman-teman. gambar html di samping itu. oke saya rasa cukup sampai disini belajar kita tentang cara menanggulangi pengulangan gambar di sebuah website, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.