Điều chỉnh cỡ ảnh làm nền với - background-size

Thuộc tính background-size cho phép điều chỉnh kích thước của các ảnh làm nền. Cú pháp cơ bản là:

background-size: width height;

Trong cú pháp thì width, height là kích thước điều chỉnh ảnh nền, có thể thiết lập các giá trị:

chiều dài: (theo đơn vị chiều dài trong CSS ví dụ 100px, 20mm ...), cho biết kích thước ảnh gốc sẽ được thu / phỏng về kích thước mới để làm nền. Ví dụ:

background-size: 50px 60mm;

phần trăm: Điều chỉnh ảnh về kích thước chiếm số phần trăm bao nhiêu phần không gian nền của phần tử. Ví dụ:

background-size: 100% 50px;

auto: Nếu nhận một giá trị auto, còn giá trị kia chỉ rõ. Thì chiều ảnh có giá trị auto tự động tính toán theo tỷ lệ ban đầu của ảnh. Ví dụ: Chiều rộng thu về 100px, chiều cao điều chỉnh sao cho đúng tỷ lệ ảnh ban đầu

background-size: 100px auto;

contain

background-size: contain;

Trường hợp viết cú pháp như trên, ảnh sẽ thu phóng sao toàn bộ ảnh đặt vừa lọt trong vào khu vực nền của phần tử.

cover

background-size: cover;

Ảnh nền sẽ thu/phóng sao cho phủ kín hết toàn bộ nền.

chú ý

• Có thể chỉ nhập một giá trị chiều dài hoặc phần trăm, trong trường hợp đó thì giá trị thứ 2 tự động là auto. Ví dụ viết background-size: 100px; thì có nghĩa là background-size: 100px auto;
• background-size: auto; đây là giá trị mặc định, ảnh giữ nguyên như ảnh gốc

Ví dụ minh họa sẽ lấy ảnh tại link 1338460.jpg để thực hiện, ảnh này có kích thước 330x439px

<style>
    .bg1 {
        height: 300px;
        width: 300px;
        background-color: orangered;
        background-repeat: no-repeat;
        background-image: 
            url("https://images.freeimages.com/images/previews/ecb/colorful-tulips-1338460.jpg");
        background-size: contain;
        
    }
</style>
<div class="bg1"></div>