CSS cơ bản

Đ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

ví dụ nền css
<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>
background-size: contain
background-size: auto;
background-size: 150px 250px
background-size: 70% auto
background-size: cover
background-size: 100% 100%

Vị trí ảnh làm nền - background-position

Thuộc tính background-position thiết lập vị trí của ảnh nền trong hệ tọa độ của phần tử. Cú pháp cơ bản là:

background-position: px py;

Trong đó px py là tọa độ góc thứ nhất nhất của ảnh nó có thể nhận các giá trị: top, left, bottom, right, center, chiều dài, phần trăm

  • top, left, bottom, right, center

    Ví dụ:

    // ảnh ở đáy, nằm giữa theo chiều đứng
    background-position: bottom center;
    background-size: 200px auto;

    // ảnh giữa phần tử
    background-position: center;
    background-size: contain;
  • chiều dài (điểm tọa độ tương đối trong box phần tử)

    Ví dụ:

    background-position: -100px 40px;
    background-size: 200px auto;
  • phần trăm (điểm tọa độ tương đối trong box phần tử)

    Ví dụ:

    background-position: 50% 70%;
    background-size: 200px auto;

Vùng tô nền - background-clip

Thuộc tính background-clip chỉ ra vùng vẽ của nền. Nó có thể nhận các giá trị:

  • border-box mặc định, nền vẽ ngoài biên viền.
  • padding-box nền vẽ cả ở vùng padding (không viền)
  • content-box nền chỉ vẽ ở vùng nội dung phần tử

Ví dụ:

border: 10px dashed #3f51b582;
padding: 20px;
background-position: center;
background-size: cover;

background-clip: border-box;
background-clip: border-box
background-clip: padding-box
background-clip: content-box

Gốc của vùng nền - background-origin

Thuộc tính này thiết lập gốc xác định ảnh nền, cú pháp như sau:

background-origin: box

Trong đó box nhận các giá trị: padding-box, border-box, content-box

border: 20px dashed #3f51b582;
padding: 20px;
background-position: 0 0;
background-size: auto;
background-origin: border-box;
background-origin: border-box
background-origin: padding-box
background-origin: content-box

Đăng ký nhận bài viết mới