Thuộc tính background-repeat trong CSS

Thuộc tính background-repeat trong CSS xác định hướng lặp của hình nền.

Thuộc tính background-repeat có thể nhận giá trị:

repeat: sử dụng giá trị này làm hình nền được lặp theo cả hai trục dọc và ngang.
repeat-x: sử dụng giá trị này làm hình nền chỉ được lặp theo trục ngang.
repeat-y: sử dụng giá trị này làm hình nền chỉ được lặp theo trục dọc.
no-repeat: sử dụng giá trị này tức là hình nền không được lặp theo bất cứ trục nào.

Thuộc tính background-repeat có thể áp dụng cho:

Tất cả các phần tử HTML.

Cú pháp thuộc tính background-repeat trong DOM

object.style.backgroundRepeat = "bat ky gia tri nao o tren";

Quảng cáo

Ví dụ thuộc tính background-repeat trong CSS

Tốt nhất khi sử dụng thuộc tính background-repeat thì hình ảnh mà bạn đang sử dụng nên có kích thước nhỏ. Với các hình ảnh lớn, bạn có thể sử dụng giá trị no-repeat nếu bạn không muốn lặp hình nền. Trong trường hợp như vậy, hình nền của bạn sẽ không được lặp và chỉ được hiển thị một lần.

Theo mặc định, thuộc tính background-repeat có giá trị repeat. Ví dụ sau minh họa cách sử dụng thuộc tính background-repeat với giá trị repeat trong CSS.

<html>
   <head>
      <style>
         body {
            background-image: url("../css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>
   <body>
      <p>Vi du ve gia tri mac dinh cua thuoc tinh background-repeat trong CSS.</p>
   </body>
</html>

Kết quả là:

Ví dụ sau minh họa cách sử dụng thuộc tính background-repeat với giá trị repeat-x trong CSS để lặp hình nền theo trục ngang.

<html>
   <head>
      <style>
         body {
            background-image: url("../css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   <body>
      <p>background_trong_css_3.htm</>
   </body>
</html>

Quảng cáo

Kết quả là:

Ví dụ sau minh họa cách sử dụng thuộc tính background-repeat với giá trị repeat-y trong CSS để lặp hình nền theo trục dọc.

<html>
   <head>
      <style>
         body {
            background-image: url("../css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>
   <body>
      <p>Vi du ve gia tri repeat-y cua thuoc tinh background-repeat trong CSS.</>
   </body>
</html>

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: