Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Lặp hình nền ngang và dọc với CSS

Thuộc tính background-image (mặc định lặp)

Khi chỉ khai báo background-image mà không thiết lập background-repeat, hình ảnh sẽ tự động lặp lại cả theo chiều ngang (trục X) và chiều dọc (trục Y) để lấp đầy vùng chứa.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg");
    }
  </style>
</head>
<body>
  <h1>Hình nền lặp tự động</h1>
</body>
</html>

Lưu ý: Đây là hành vi mặc định của CSS. Để kiểm soát việc lặp, hãy sử dụng thuộc tính background-repeat với các giá trị: repeat (mặc định), repeat-x, repeat-y, no-repeat.