Thiết lập nền background-size background-clip CSS

Đ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ị:

background-size: 50px 60mm;

background-size: 100% 50px;

background-size: 100px auto;

background-size: contain;

background-size: cover;

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>

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;

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;