#background-size
Properti CSS background-size diperkenalkan di CSS3 untuk keperluan pengaturan dimensi gambar latar belakang.
Properti ini memungkinkan kamu menentukan dengan tepat ukuran gambar latar belakang.
Selanjutnya, kamu dapat menggunakan kata kunci cover dan contain untuk menskala gambar ke kotak.
Properti background-size digunakan bersama dengan properti background-image untuk menentukan gambar latar belakang pada elemen HTML.
CSS Syntax
background-size: auto | length | cover | contain | initial | inherit;
Javascript Syntax
object.style.backgroundSize="60px 120px"
default
background-size: auto auto;
Gambar latar belakang akan mempertahankan ukuran asli .
Misalnya, gambar latar belakang ini berukuran 960px x 640px . Rasio aspeknya adalah 3 per 2 . Itu lebih besar dari wadahnya (yang tingginya 150px) dan karenanya akan terpotong .
background-size: 120px 80px;
Kamu dapat menentukan ukuran dalam piksel :
- nilai pertama adalah ukuran horizontal
- yang kedua adalah ukuran vertikal
background-size: 100% 50%;
Kamu dapat menggunakan nilai persentase juga. Hati-hati karena ini dapat mengubah rasio aspek dari gambar latar belakang, dan mengarah ke hasil yang tidak terduga.
background-size: contain;
Kata kunci contain akan mengubah ukuran gambar latar belakang untuk memastikannya tetap ada sepenuhnya terlihat .
background-size: cover;
Kata kunci cover akan mengubah ukuran gambar latar belakang untuk memastikan elemen tersebut tertutup sepenuhnya .