1. Sử dụng nhiều hình nền cho phần tử trong CSS

CSS cho phép bạn thêm nhiều hình nền cho một phần tử, thông qua thuộc tính background-image

Các hình nền khác nhau được phân tách bằng dấu phẩy và các hình ảnh được xếp chồng lên nhau, nơi hình ảnh đầu tiên gần với người xem nhất

Ví dụ sau có hai hình ảnh nền, hình ảnh đầu tiên là một bông hoa (căn chỉnh ở phía dưới và bên phải) và hình ảnh thứ hai là nền giấy (căn chỉnh ở góc trên cùng bên trái):

Bạn có thể đặt nhiều hình nền bằng cách sử dụng thuộc tính nền riêng lẻ (như trên) hoặc sử dụng thuộc tính background

Ví dụ:

2. Kích thước nền trong CSS

Thuộc tính background-size trong CSS cho phép bạn chỉ định kích thước của hình ảnh nền

Kích thước có thể được chỉ định theo độ dài, tỷ lệ phần trăm hoặc bằng cách sử dụng một trong giá trị: contain và cover

Ví dụ sau đây thay đổi kích thước hình ảnh nền thành nhỏ hơn nhiều so với hình ảnh gốc (sử dụng pixel):

Có hai giá trị khác cho background-size là contain và cover

contain sẽ chia tỷ lệ hình nền càng lớn càng tốt (nhưng cả chiều rộng và chiều cao của hình ảnh phải vừa với vùng nội dung). Như vậy, tùy thuộc vào tỷ lệ của ảnh nền và khu vực định vị nền, có thể có một số vùng nền không bị ảnh nền che phủ

cover sẽ chia tỷ lệ ảnh nền để vùng nội dung được bao phủ hoàn toàn bởi ảnh nền (cả chiều rộng và chiều cao của nó đều bằng hoặc vượt quá vùng nội dung). Do đó, một số phần của hình nền có thể không hiển thị trong khu vực định vị nền

Ví dụ:

2.1 Xác định kích thước của nhiều hình nền

Thuộc tính background-size cũng chấp nhận nhiều giá trị cho kích thước nền (sử dụng danh sách được phân tách bằng dấu phẩy), khi làm việc với nhiều nền

Ví dụ sau có ba hình nền được chỉ định, với giá trị kích thước nền khác nhau cho mỗi hình ảnh:

2.2 Hình nền với kích thước đầy đủ

Để có một hình nền trên một trang web luôn luôn bao phủ toàn bộ cửa sổ trình duyệt gồm cần thỏa mãn các yêu cầu sau:

  • Lấp đầy toàn bộ trang bằng hình ảnh (không có khoảng trắng)
  • Chia tỷ lệ hình ảnh khi cần thiết
  • Hình ảnh trung tâm trên trang
  • Không có thanh cuộn

Ví dụ:

3. Thuộc tính background-origin trong CSS

Thuộc tính background-origin trong CSS chỉ định vị trí của hình nền

Thuộc tính có ba giá trị khác nhau:

  • border-box – hình nền bắt đầu từ góc trên bên trái của đường viền
  • padding-box – (mặc định) hình nền bắt đầu từ góc trên bên trái của cạnh phần đệm
  • content-box – hình nền bắt đầu từ góc trên bên trái của nội dung

Ví dụ:

4. Thuộc tính background-clip trong CSS

Thuộc tính background-clip trong CSS chỉ định vùng sơn của nền

Thuộc tính có ba giá trị khác nhau:

  • border-box – (mặc định) nền được sơn đến mép ngoài của đường viền
  • padding-box – nền được sơn vào mép ngoài của đệm
  • content-box – nền được sơn bên trong hộp nội dung

Ví dụ: