Background trong CSS

Trang trước
Trang sau  

Để xác định các hiệu ứng liên quan tới background cho các phần tử trong HTML, bạn có thể sử dụng các thuộc tính background trong CSS.

  • Thuộc tính background-color: thuộc tính này được sử dụng để thiết lập màu nền của một phần tử.

  • Thuộc tính background-image: thuộc tính này được sử dụng để thiết lập hình nền cho một phần tử.

  • Thuộc tính background-repeat: thuộc tính này được sử dụng để điều khiển sự lặp đi lặp lại của một hình ảnh nền theo chiều dọc hoặc chiều ngang.

  • Thuộc tính background-position: thuộc tính này được sử dụng để điều khiển vị trí của một hình ảnh nền.

  • Thuộc tính background-attachment: thuộc tính này được sử dụng để xác định xem có hay không một hình nền là cố định hoặc có thể scroll với phần còn lại của trang.

  • Thuộc tính background: sử dụng thuộc tính này nếu bạn muốn viết ít code hơn mà vẫn xác định được tất cả các thuộc tính liên quan tới background ở trên cho hình nền.

Thiết lập màu nền trong CSS

Để thiết lập màu nền trong CSS, bạn sử dụng thuộc tính background-color. Ví dụ sau minh họa cách thiết lập màu nền cho một phần tử trong CSS. Như trong chương trước đã trình bày, để thiết lập giá trị màu trong CSS, bạn có thể sử dụng tên màu, giá trị Hex Code, giá trị Short Hex Code hoặc thuộc tính rgb().

<html>
   <head>
   <body>
      <p style = "background-color:yellow;">
      Phan noi dung nay co Background Color la mau vang.</p>
   </body>
   </head>
<html>
Quảng cáo

Thiết lập hình nền trong CSS

Để thiết lập màu nền trong CSS, bạn sử dụng thuộc tính background-image. Giá trị url ở đây xác định đường dẫn đến nơi bạn lưu giữ hình ảnh.

<html>
   <head>
      <style>
         body  {
            background-image: url("../css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
      <body>
         <h1>Hoc CSS co ban tai VietJack!</h1>
      </body>
   </head>
<html>

Lặp lại hình nền trong CSS

Nếu bạn muốn hình nền của mình lặp đi lặp lại theo chiều ngang hoặc theo chiều dọc, bạn có thể sử dụng thuộc tính background-repeat trong CSS. Thuộc tính này có các giá trị:

  • repeat: Giá trị mặc định. Hình nền sẽ được lặp đi lặp lại theo cả chiều dọc lẫn chiều ngang.

  • repeat-x: Hình nền sẽ chỉ được lặp đi lặp lại theo chiều ngang.

  • repeat-y: Hình nền sẽ chỉ được lặp đi lặp lại theo chiều dọc.

  • no-repeat: Hình nền sẽ không được lặp đi lặp lại.

Dưới đây là các ví dụ minh họa cho các giá trị của thuộc tính backgroud-color. Để thực hành, bạn nên chọn các hình ảnh có kích cỡ nhỏ để thấy rõ hiệu ứng.

Theo mặc định, thuộc tính background-repeat sẽ có giá trị repeat.

<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à:

Quảng cáo

Ví dụ tiếp theo minh họa cách lặp hình nền theo chiều dọc bởi sử dụng giá trị repeat-y của thuộc tính background-color:

<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à:

Ví dụ tiếp theo minh họa cách lặp hình nền theo chiều ngang bởi sử dụng giá trị repeat-x của thuộc tính background-color:

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

Kết quả là:

Thiết lập vị trí hình nền trong CSS

Để thiết lập vị trí cho hình nền, bạn sử dụng thuộc tính background-position trong CSS. Đơn vị thường được sử dụng để xác định giá trị cho thuộc tính background-position này là px.

Ví dụ sau minh họa cách thiết lập vị trí hình nền cách cạnh trái 100 px.

<html>
   <head>
      <style>
         body {
            background-image: url("../css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>
   <body>
      <p>Vi du ve dat hinh nen tai mot vi tri cu the.</>
   </body>
</html>

Kết quả là:

Ví dụ sau minh họa cách thiết lập vị trí hình nền cách cạnh trái 100 px, và cạnh trên 200px.

<html>
   <head>
      <style>
         body {
            background-image: url("../css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>
   <body>
      <p>Vi tri hinh nen duoc xac dinh la: 100px va 200px.</>
   </body>
</html>

Kết quả là:

Thiết lập vị trí hình nền trong CSS

Nếu bạn muốn thiết lập hình nền là cố định hay là có thể scroll được, bạn sử dụng thuộc tính background-attachment trong CSS. Thuộc tính này nhận hai giá trị là fixed và scroll tương ứng. Hai ví dụ dưới đây minh họa cách sử dụng hai giá trị này của thuộc tính background-attachment trong CSS.

<!DOCTYPE html>
<html>
   <head>
   
      <style>
         body  {
            background-image: url('../css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
      
   </head>
   <body>
   
      <p>Hinh nen duoc dat co dinh. Ban khong the Scroll.</p>
      
   </body>
</html>

Kết quả là:

Ví dụ sau minh họa cách thiết lập cho hình nền có thể Scroll:

<!DOCTYPE html>
<html>
   <head>
   
      <style>
         body  {
            background-image: url('../css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment:scroll;
         }.
      </style>
      
   </head>
   <body>
   
      <p>Vi du minh hoa cho gia tri scroll cua thuoc tinh background-attachment.</p>
      <p>Voi gia tri nay, ban co the scroll hinh nen.</p>
      
   </body>
</html>

Kết quả là:

Thuộc tính background trong CSS

Để tối thiểu lượng code cần viết, bạn có thể sử dụng thuộc tính background trong CSS để xác định các thuộc tính liên quan tới hình nền. Thứ tự các giá trị thuộc tính khi bạn sử dụng thuộc tính background là:

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

Sẽ không có vấn đề gì nếu một giá trị nào đó không được xác định, miễn là các thuộc tính đã được thiết lập vẫn theo thứ tự.

<p style="background:url(../css/images/hinh_anh_nen.gif) repeat fixed;">
   Doan van nay co hinh nen co dinh (gia tri fixed) va co the lap di lap lai (gia tri repeat)!
</p>

Đã 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.

Trang trước
Trang sau  
Bài viết liên quan
Học cùng VietJack
Tài liệu giáo viên