Background CSS

Dua Jendela Tuesday, November 16, 2021

10. Background CSS

Property background = pengaturan background warna/gambar pada elemen. Property yang berkaitan dengan background antara lain :

Background-color, mengatur warna latar belakang elemen.
Background-image, mengatur gambar latar belakang.
Background-attachment, mengatur sifat background terhadap scroll.
Background-position, mengatur posisi background.
Background-repeat, mengatur perulangan background
Background-origin, mengatur penempatan background pada box model.
Background-size, mengatur ukuran background.

Nilai dari property diatas dapat kita gabungkan menjadi :

Berikut adalah contoh penggunaan script property background dengan nama file background.html

<html>
<head>
<title>Belajar CSS Background</title>
<style type="text/css">
   div{
        width: 150px; height: 150px;
        background: blue;
        float: left;
        margin:10px;
        background-image: url('../gambar/aku.jpeg');
   }
   .dua{
        background-repeat: no-repeat;
        background-position: 30px 100px;
   }
   .tiga{
        background-repeat: repeat-x;
   }
   .empat{
        background-repeat: repeat-y;
   }
</style>
</head>
<body>
   <div class="satu">Satu</div>
   <div class="dua">Dua</div>
   <div class="tiga">Tiga</div>
   <div class="empat">Empat</div>
</body>
</html>