CSS Background Image: Hướng dẫn từng bước

Thuộc tính background-image đặt hình ảnh làm nền cho phần tử. Cú pháp: background-image: url(imageUrl);. Có thể đặt nhiều nền chồng lên nhau.

Ví dụ cơ bản: Banner quán cà phê

.image {
  background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg);
  height: 250px;
}
.header {
  padding-top: 50px; color: white; font-size: 20px; text-align: center;
}

<div class="image">
  <p class="header">Welcome to The Coffee Grind</p>
</div>

Multiple Background Images (Nhiều nền)

.image {
  background-image: 
    url(icon-coffee.png),      /* Lớp trên cùng */
    url(background-coffee.jpg); /* Lớp dưới */
  height: 250px;
}

Ảnh đầu tiên nằm trên cùng. Dùng cho icon, pattern chồng lên ảnh lớn.

Background Size (Kích thước nền)

Thuộc tính background-size:

• auto (mặc định): Trình duyệt quyết định.
• contain: Hiện toàn bộ ảnh, giữ tỷ lệ, có thể để trống vùng không lấp đầy.
• cover: Lấp đầy container, giữ tỷ lệ, có thể bị cắt.
• <width> <height>: Kích thước tuyệt đối (px, %, em...).

.image { background-size: contain; } /* Hiện hết ảnh */
.image { background-size: 200px 200px; } /* Cố định 200x200px */

Background Origin (Vị trí gốc nền)

background-origin xác định khung tham chiếu cho background-position:

• padding-box (mặc định): Từ cạnh padding.
• border-box: Từ cạnh border.
• content-box: Từ cạnh content.

.image {
  border: 10px solid black;
  padding: 25px;
  background-origin: content-box; /* Nền bắt đầu từ content box */
  background-repeat: no-repeat;
}

Tạo khoảng trắng giữa border và background image.

Kết luận

background-image tạo nền tùy biến từ ảnh. Kết hợp background-size, background-origin, background-repeat, background-position để kiểm soát hoàn toàn hiển thị. Thay thế màu nền đơn điệu hoặc gradient.