Background Size

Properti CSS background-size

Menentukan dimensi (ukuran) latar belakang gambar (image).

<!-- kode elemen -->
<div>
 <p><!--penjelasan nilai value--></p>
</div>

<!-- style CSS -->
<style>
div {
    background-image: url(https://i.ibb.co/YWZJQVZ/bgmini.webp);
    background-repeat: no-repeat;
    background-size: value; /* Lihat contoh untuk menentukan nilai value */
}
</style>

Dibawah ini tampilan untuk masing-masing value dari propery background-size:, value =

1. auto

   Ukuran asli file gambar

2. contain

   Ukuran file di-skalakan hingga muat

3. cover

   background meng-cover seluruh permukaan elemen

4. persen

   Sekian persen (%) dari luas elemen

5. panjang

   Sekian piksel (px) sesuai nilai yang dimasukkan.

DEMO

TEKS JUDUL

Disini teks deskripsi tambahan

<div class='cover'>
  <div>
    <h1>TEKS JUDUL</h1>
    <p>Disini teks deskripsi tambahan</p>
    <div class='garis-bawah'></div>
  </div>
</div>

<style>
  .cover {
    width:100%;
    height:300px;
    text-align:center;
    position:relative;
    background:url(https://i.ibb.co/17fDLNw/wood.webp);
    background-repeat:no-repeat;
    background-size:cover;
  }
  .garis-bawah {
    position: relative;
    top: -60px;
    width: 50%;
    margin: auto;
    display: block;
    border-top: 2px solid white;
  }
  .cover> div {
    position:absolute;
    top:25%;
    left:0;
    right:0;
    text-align:center;
    padding:10px 5px;
    background:transparent;
    color:white;
  }
  .cover div h1 {
  font:900 35px Verdana,sans-serif;
  }
  .cover div p {
    color: black;
    font-weight: bold;
    background: white;
    text-transform: uppercase;
    mix-blend-mode: screen;
  }
</style>