Cách thiết lập background-image không lặp lại (no-repeat) bằng JavaScript DOM

Để ngăn hình ảnh nền lặp lại trong JavaScript, bạn sử dụng thuộc tính backgroundRepeat và gán giá trị "no-repeat". Thuộc tính này kiểm soát hành vi lặp của background-image theo cả hai trục ngang và dọc.

Ví dụ minh họa

Đoạn mã dưới đây thêm hình ảnh nền cho <body> và đặt chế độ không lặp khi nhấn nút:

<!DOCTYPE html>
<html>
<body>
  <button onclick="setBackground()">Đặt hình nền không lặp</button>
  <script>
    function setBackground() {
      document.body.style.backgroundImage = "url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg')";
      document.body.style.backgroundRepeat = "no-repeat";
      // Tùy chọn: căn giữa và co giãn
      document.body.style.backgroundPosition = "center";
      document.body.style.backgroundSize = "cover";
    }
  </script>
</body>
</html>

Các giá trị phổ biến của backgroundRepeat

Mẹo: Kết hợp với backgroundPosition và backgroundSize để kiểm soát chính xác vị trí và kích thước hình nền.