Thêm nhiều background (multiple backgrounds) với CSS3

CSS3 cho phép gán nhiều hình ảnh background cho một element, phân cách bằng dấu phẩy. Hình ảnh đầu tiên nằm trên cùng.

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    div {
      background-image: 
        url("https://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3613.png"),
        url("https://i.picsum.photos/id/256/1200/300.jpg");
      background-position: left bottom, left top;
      background-repeat: repeat, repeat;
      padding: 15px;
      min-height: 300px;
      color: white;
      text-shadow: 1px 1px 2px black;
    }
    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Nhiều Background Với CSS</h1>
  <div>
    <h1>Văn Bản Mẫu</h1>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ipsum dolorem? Adipisci accusantium eveniet necessitatibus beatae est, dolorum nobis minima aliquam atque id at sapiente culpa, alias nulla rem. </p>
  </div>
</body>
</html>

Kết quả

Hộp div có hình nền lá thu vàng lặp lại ở dưới, hình ảnh phong cảnh ở trên, văn bản trắng dễ đọc nhờ text-shadow.

Quy tắc quan trọng

• Thứ tự: background đầu tiên = lớp trên cùng
• Mỗi background có thể có riêng position, repeat, size
• Phân cách các giá trị bằng dấu phẩy theo thứ tự tương ứng