Nội dung chính
CSS cung cấp cho các front-end developer bộ công cụ đầy đủ và linh hoạt để tùy chỉnh giao diện trang web, bao gồm cả việc tạo background cho các phần tử HTML. Trong bài viết này, ITviec sẽ hướng dẫn chi tiết cách sử dụng 8 thuộc tính background quan trọng trong CSS, giúp bạn tạo ra những trang web đẹp mắt và ấn tượng.
Đọc bài viết này để hiểu rõ:
- Thuộc tính Background trong CSS là gì?
- Vì sao cần sử dụng thuộc tính background khi thiết kế website?
- Cách sử dụng 8 thuộc tính cơ bản của background CSS
Background CSS là gì?
Background CSS là một thuộc tính tốc ký (shorthand) được sử dụng để xác định và kiểm soát background (nền) của một phần tử thông qua việc thiết lập 8 yếu tố phụ khác gồm:
- background-color: Thiết lập màu của background cho phần tử.
- background-image: Thiết lập hình ảnh làm background cho phần tử.
- background-repeat: Thiết lập cách background được lặp lại.
- background-attachment: Thiết lập cách background gắn với phần tử khi cuộn trang.
- background-position: Thiết lập vị trí của background trong phần tử.
- background-origin: Thiết lập vị trí bắt đầu hiển thị background.
- background-clip: Thiết lập vị trí cắt background khi bị chồng chéo với nội dung phần tử.
- background-size: Thiết lập kích thước của background.
Ví dụ cú pháp thiết lập các yếu tố trong background CSS:
<!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; background-image: url("img_tree.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } </style> </head> <body> <h1>Ví dụ về background CSS</h1> <p>Trong ví dụ này, ITviec đã thiết lập các thuộc tính sau:</p> <p>background-color: lightblue;</p> <p>background-image: url("img_tree.gif");</p> <p>background-repeat: no-repeat;</p> <p>background-attachment: fixed;</p> <p>background-position: center;</p> </body> </html>
Bạn cũng có thể viết ngắn gọn các câu lệnh thiết lập thuộc tính background trong ví dụ thành:
background: lightblue url("img_tree.gif") no-repeat fixed center;
Lưu ý: Hình ảnh img_tree.gif cần phải tồn tại trong đường dẫn được chỉ định. Nếu không, hình ảnh sẽ không hiển thị.
Vai trò của background CSS trong thiết kế website
- Tăng tính thẩm mỹ: Sử dụng hình ảnh làm nền giúp tạo điểm nhấn cho các phần tử, thu hút sự chú ý của người dùng và khiến giao diện trang web trở nên sinh động, bắt mắt hơn.
- Tạo sự cân đối cho bố cục: Khi sử dụng thuộc tính CSS float để định vị các thành phần bố cục, độ dài của các cột trên trang web có thể ngắn hoặc dài hơn so với nhau. Khi này, nền của các cột sẽ trồi sụt mất cân xứng, khiến bố cục trông lộn xộn, thiếu chuyên nghiệp. Bằng thuộc tính background CSS, bạn có thể áp dụng một background cho tất cả các cột, thay vì áp dụng mỗi background cho một cột. Từ đó có thể cân đối bố cục ngay cả khi điều chỉnh nhiều lần.
- Cải thiện khả năng truy cập: Với thuộc tính background-image, bạn có thể sử dụng hình ảnh chứa văn bản thay thế cho văn bản thuần tuý trên trang. Bằng cách này, văn bản có thể được hiển thị rõ nét và chính xác với những người dùng không có font chữ thích hợp, đảm bảo nội dung được truyền tải đầy đủ.
- Tăng tính linh hoạt: Thay vì sử dụng nhiều thẻ HTML để tạo bố cục, ta có thể sử dụng background image để tạo các hiệu ứng phức tạp một cách dễ dàng và hiệu quả hơn. Việc sử dụng background image giúp giảm thiểu mã code, khiến trang web trở nên gọn nhẹ và dễ bảo trì hơn.
Hướng dẫn cách dùng 8 thuộc tính background CSS
background-color
Thuộc tính background-color giúp thiết lập màu nền của một phần tử, bao gồm phần đệm (padding) và đường viền (border), không tính lề (margin).
Cú pháp của thuộc tính background-color:
background-color: color | transparent | initial | inherit;
Trong đó, các giá trị có ý nghĩa như sau:
| Giá trị | Mô tả | Ví dụ | Hình minh họa | |
| color | color name | Thiết lập thuộc tính background-color bằng tên màu sắc. | background-color: yellow; |  |
| HEX code | Thiết lập thuộc tính background-color bằng mã màu HEX. | background-color: #FFC0CB; |  |
|
| Giá trị RGB | Thiết lập thuộc tính background-color bằng giá trị màu sắc RGB. | background-color: rgb(255, 105, 180); |  |
|
| Giá trị RGBA | Thiết lập thuộc tính background-color bằng giá trị RGBA. | background-color: rgba(0, 0, 255, 0.5); |  |
|
| Giá trị HSL | Thiết lập thuộc tính background-color bằng giá trị HSL. | background-color: hsl(120, 100%, 50%); |  |
|
| Giá trị HSLA | Thiết lập thuộc tính background-color bằng giá trị HSLA. | background-color: hsla(0, 100%, 50%, 1.0); |  |
|
| transparent | Giá trị mặc định của thuộc tính background-color. Với giá trị này, background sẽ có màu trong suốt. | background-color: transparent; |  |
|
| initial | Thiết lập thuộc tính về giá trị mặc định. | |||
| inherit | Thiết lập thuộc tính với giá trị của phần tử cha. | |||
Lưu ý: Thuộc tính background-color chỉ áp dụng cho phần tử HTML, không ảnh hưởng đến nội dung bên trong như văn bản, hình ảnh.
background-image
Thuộc tính background-image được sử dụng để thiết lập một hoặc nhiều background cho một phần tử.
Cú pháp như sau:
background-image: url('url') | none | initial | inherit;
Trong đó, các giá trị có ý nghĩa như bảng bên dưới:
|
Giá trị |
Mô tả | Ví dụ | Hình minh họa |
|
url(‘url’) |
URL đến hình ảnh. Để thiết lập nhiều hình ảnh, hãy phân cách các URL bằng dấu phẩy. | background-image: url(“img_tree.gif”), url(“paper.gif”); |  |
| none | Đây là trường hợp mặc định. Khi này, background sẽ không hiển thị hình ảnh. | background-image: none; | |
|
conic-gradient() |
Thiết lập hiệu ứng chuyển màu theo hình nón làm background. Cần xác định ít nhất 2 màu sắc để sử dụng giá trị này. | background-image: conic-gradient(red, yellow, green); |  |
| linear-gradient() | Thiết lập hiệu ứng chuyển màu theo tuyến tính (theo đường thẳng) làm background. Cần xác định ít nhất hai màu sắc (top to bottom – từ trên xuống dưới) để sử dụng giá trị này. | background-image: linear-gradient(red, yellow, blue); |  |
|
radial-gradient() |
Thiết lập hiệu ứng chuyển màu tỏa tròn làm background. Cần xác định ít nhất hai màu (center to edges – từ giữa đến cạnh) để sử dụng giá trị này. | background-image: radial-gradient(red, green, blue); |  |
| repeating-conic-gradient() | Lặp lại giá trị conic-gradient(). | background-image: repeating-conic-gradient(red 10%, yellow 20%); |  |
|
repeating-linear-gradient() |
Lặp lại giá trị linear-gradient(). | background-image: repeating-linear-gradient(red, yellow 10%, green 20%); |  |
| repeating-radial-gradient() | Lặp lại giá trị radial-gradient(). | background-image: repeating-radial-gradient(red, yellow 10%, green 15%); |  |
|
initial |
Thiết lập thuộc tính về giá trị mặc định. | ||
| inherit | Kế thừa thuộc tính từ phần tử cha. |
Đọc thêm: Chèn ảnh trong HTML: Tổng hợp chi tiết các cách sử dụng
background-repeat
Thuộc tính background-repeat thiết lập cách lặp lại background của phần tử. Thuộc tính này chỉ hoạt động khi thuộc tính background-image được sử dụng để đặt hình ảnh hoặc pattern cho background. Background có thể được lặp lại theo trục ngang, trục dọc hoặc không lặp lại.
Cú pháp như sau:
background-repeat: repeat | repeat-x | round | space | repeat-y | no-repeat | initial | inherit;
Trong đó, các giá trị có ý nghĩa như bảng bên dưới đây:
|
Giá trị |
Mô tả | Ví dụ | Hình minh họa |
| repeat | Đây là giá trị mặc định. Hình ảnh sẽ được lặp lại theo cả chiều dọc và chiều ngang. Hình ảnh cuối cùng sẽ bị cắt bớt nếu vượt quá kích thước background. | background-repeat: repeat; |  |
|
repeat-x |
Hình ảnh được lặp lại theo chiều ngang của background. | background-repeat: repeat-x; |  |
| repeat-y | Hình ảnh được lặp lại theo chiều dọc của background. | background-repeat: repeat-y; |  |
|
no-repeat |
Hình ảnh không được lặp lại mà chỉ hiển thị một lần. | background-repeat: no-repeat; |  |
| space | Hình ảnh được lặp lại nhiều nhất có thể mà không bị cắt bớt. Hình ảnh đầu tiên và cuối cùng được ghim vào hai bên của phần tử và khoảng trắng được phân bổ đều giữa các hình ảnh. | background-repeat: space; |  |
|
round |
Hình ảnh được lặp lại và bị ép hoặc kéo dài để lấp đầy khoảng trống của background. | background-repeat: round; |  |
|
initial |
Thiết lập thuộc tính về giá trị mặc định. | ||
| inherit | Kế thừa thuộc tính từ phần tử cha. |
background-attachment
Thuộc tính background-attachment xác định cách thức hiển thị background của một phần tử HTML khi người dùng cuộn trang.
Cú pháp như sau:
background-attachment: scroll | fixed | local | initial | inherit;
Thuộc tính background-attachment có thể nhận nhiều giá trị khác nhau, bao gồm:
| Giá trị | Mô tả | Cú pháp |
| scroll | Đây là giá trị mặc định. Background sẽ di chuyển cùng với khung nhìn khi người dùng cuộn trang. | background-attachment: scroll; |
| fixed | Background sẽ cố định vào khung nhìn và không di chuyển khi người dùng cuộn trang. | background-attachment: fixed; |
| local | Background sẽ di chuyển cùng với nội dung của phần tử chứa nó. | background-attachment: local; |
| initial | Thiết lập thuộc tính về giá trị mặc định. | background-attachment: initial; |
| inherit | Kế thừa thuộc tính từ phần tử cha. | background-attachment: inherit; |
Lưu ý: Thuộc tính background-attachment chỉ hoạt động với background-image chứ không ảnh hưởng đến background-color.
background-position
Thuộc tính background-position trong CSS được sử dụng để xác định vị trí của background cho một phần tử HTML. Nó hoạt động cùng với các thuộc tính background-image và background-repeat để kiểm soát cách hiển thị background trên trang web.
Cú pháp như sau:
background-position: value;
Thuộc tính background-position có thể nhận nhiều giá trị khác nhau, bao gồm:
|
Giá trị |
Mô tả | Ví dụ | Hình minh họa |
| left top | Vị trí mặc định, thiết lập hình ảnh ở phía trên cùng bên trái của phần tử. | background-position: left top; |  |
|
left center |
Thiết lập hình ảnh ở chính giữa bên trái của phần tử. | background-position: left center; |  |
| left bottom | Thiết lập hình ảnh ở phía dưới bên trái. | background-position: left bottom; |  |
|
center top |
Thiết lập hình ảnh ở vị trí trên cùng chính giữa. | background-position: center top; |  |
| center center | Thiết lập hình ảnh ở vị trí trung tâm. | background-position: center center; |  |
|
center bottom |
Thiết lập hình ảnh ở vị trí dưới cùng chính giữa. | background-position: center bottom; |  |
| right top | Thiết lập hình ảnh ở vị trí trên cùng bên phải. | background-position: right top; |  |
|
right center |
Thiết lập hình ảnh ở vị trí chính giữa bên phải. | background-position: right center; |  |
| right bottom | Thiết lập hình ảnh ở vị trí dưới cùng bên phải. | background-position: right bottom; |  |
|
x% y% |
Giá trị đầu tiên xác định vị trí theo chiều ngang, giá trị thứ hai xác định vị trí theo chiều dọc.
Góc trên cùng bên trái là 0% 0%, đây cũng là giá trị mặc định. Góc dưới cùng bên phải là 100% 100%. Nếu bạn chỉ định một giá trị, giá trị còn lại mặc định sẽ là 50%. |
background-position: 25% 75% |  |
| x-pos y-pos | Giá trị đầu tiên xác định vị trí theo chiều ngang, giá trị thứ hai xác định vị trí theo chiều dọc.
Góc trên cùng bên trái là 0 0. Các đơn vị có thể là pixel (0px 0px) hoặc bất kỳ đơn vị CSS nào khác. Nếu bạn chỉ định một giá trị, giá trị còn lại mặc định sẽ là 50%. Có thể kết hợp cả tỉ lệ phần trăm và các vị trí được đặt tên. |
background-position: 80px 30px; |  |
|
initial |
Thiết lập thuộc tính về giá trị mặc định. | ||
| inherit | Kế thừa thuộc tính từ phần tử cha. |
Lưu ý:
- Đối với ký hiệu x%y%, ở đây x% biểu thị vị trí nằm ngang & y% biểu thị vị trí thẳng đứng so với vị trí ban đầu, tức là trên cùng bên trái.
- Đối với ký hiệu x-pos y-pos, ở đây các đơn vị được biểu thị bằng pixel hoặc bất kỳ đơn vị CSS nào khác.
background-origin
Thuộc tính background-origin được sử dụng để xác định vị trí bắt đầu của background-image trong một phần tử HTML. Nó quy định khu vực mà background-image sẽ được vẽ, ảnh hưởng đến cách hiển thị background khi phần tử có padding, border hoặc content.
Cú pháp:
background-origin: padding-box | border-box | content-box | initial | inherit;
Thuộc tính background-origin có thể nhận nhiều giá trị khác nhau, bao gồm:
|
Giá trị |
Mô tả | Ví dụ | Hình minh họa |
| padding-box | Background image sẽ bắt đầu từ rìa ngoài của padding, bao gồm cả padding và border. | background-origin: padding-box; |  |
|
border-box |
Background image sẽ bắt đầu từ rìa ngoài của border, bao gồm padding, border và nội dung. | background-origin: border-box; |  |
| content-box | Đây là giá trị mặc định. Background image sẽ bắt đầu từ rìa ngoài của nội dung, bao gồm padding, không bao gồm border. | background-origin: content-box; |  |
|
initial |
Thiết lập thuộc tính về giá trị mặc định. | ||
| inherit | Kế thừa thuộc tính từ phần tử cha. |
background-clip
Thuộc tính background-clip quy định phạm vi mà background image hoặc background color sẽ bao phủ, ảnh hưởng đến cách hiển thị background khi phần tử có padding, border hoặc nội dung.
Cú pháp:
background-clip: border-box | padding-box | content-box | initial | inherit;
Thuộc tính này có năm giá trị chính:
|
Giá trị |
Mô tả | Ví dụ | Hình minh họa |
| border-box | Đây là giá trị mặc định. Background image hoặc background color sẽ bao phủ toàn bộ phần tử, bao gồm padding, border và nội dung. | background-clip: border-box; |  |
|
padding-box |
Background image hoặc background color sẽ bao phủ phần tử, bao gồm padding và nội dung, không bao gồm border. | background-clip: padding-box; |  |
| content-box | Background image hoặc background color chỉ bao phủ nội dung của phần tử, không bao gồm padding hoặc border. | background-clip: content-box; |  |
|
text |
Background image hoặc background color chỉ bao phủ phần văn bản của phần tử, không bao gồm các phần tử con khác. | background-clip: text; |  |
| inherit | Kế thừa thuộc tính từ phần tử cha. |
background-size
Thuộc tính background-size được sử dụng để xác định kích thước của hình nền trong một phần tử HTML. Thuộc tính này chỉ hoạt động khi thuộc tính background-image được sử dụng để đặt hình ảnh hoặc pattern cho background.
Cú pháp như sau:
background-size: auto | length | cover | contain | initial | inherit;
Trong đó:
| Giá trị | Mô tả | Ví dụ | Hình minh họa |
| auto | Background image sẽ giữ nguyên kích thước gốc và có thể không bao phủ toàn bộ phần tử. | background-size: auto; |  |
| length | Giá trị đầu tiên xác định chiều rộng, giá trị thứ hai xác định chiều cao. Nếu chỉ cung cấp một giá trị, giá trị thứ hai mặc định sẽ là “auto”. | background-size: 500px; |  |
| percentage | Thiết lập chiều rộng và chiều cao của background image theo tỷ lệ phần trăm của phần tử cha.
Giá trị đầu tiên thiết lập chiều rộng, giá trị thứ hai thiết lập chiều cao. Nếu bạn chỉ cung cấp một giá trị, giá trị thứ hai sẽ mặc định là “auto”. |
background-size: 70%; |  |
| cover | Background image được kéo dãn để bao phủ toàn bộ phần tử, giữ nguyên tỷ lệ khung hình. | background-size: cover; |  |
| contain | Background sẽ được điều chỉnh để vừa với phần tử mà không bị biến dạng, giữ nguyên tỷ lệ khung hình. | background-size: contain; |  |
| initial | Background image sử dụng kích thước mặc định của trình duyệt. |
3 ví dụ về cách sử dụng background CSS
Thiết lập background với từ khoá màu sắc
Thiết lập background bằng từ khóa màu sắc là cách đơn giản nhất để thay đổi nền của một phần tử. Bạn có thể sử dụng tên màu chuẩn hoặc mã màu trong CSS.
Bạn có thể sử dụng thuộc tính background-color như sau:
<!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } div { background-color: coral; padding: 20px; margin: 10px; } </style> </head> <body> <h1>Thiết lập Background với Từ Khoá Màu Sắc</h1> <p>Nền của trang được thiết lập với màu "lightblue".</p> <div> <p>Nền của khối div này được thiết lập với màu "coral".</p> </div> </body> </html>
Kết quả: Nền của toàn bộ trang web được thiết lập thành màu xanh nhạt (light blue). Nền của phần tử <div> được thiết lập thành màu cam san hô (coral), tạo sự tương phản và điểm nhấn.
Thiết lập background với hình ảnh
Thiết lập background bằng hình ảnh cho phép bạn thêm hình ảnh vào nền của một phần tử, giúp giao diện trở nên sinh động và thú vị hơn.
Bạn có thể sử dụng các thuộc tính background-image, background-repeat và background-size như sau:
<!DOCTYPE html> <html> <head> <style> body { background-image: url("https://itviec.com/blog/wp-content/uploads/2024/06/laptop-1-scaled.jpeg"); background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <h1>Thiết lập Background với hình ảnh</h1> </body> </html>
Kết quả:
- Thuộc tính background-image đặt hình ảnh với URL tương ứng làm nền cho toàn bộ trang web.
- Thuộc tính background-repeat: no-repeat; đảm bảo rằng hình ảnh không lặp lại.
- Thuộc tính background-size: cover; đảm bảo rằng hình ảnh nền bao phủ toàn bộ vùng nền, điều chỉnh kích thước để phù hợp mà không làm méo hình ảnh.
Thiết lập Background với nhiều hình ảnh
CSS cho phép bạn thiết lập nhiều hình ảnh nền cho cùng một phần tử. Các hình nền được xếp chồng lên nhau, với hình nền đầu tiên được vẽ ở trên cùng.
Bạn có thể sử dụng thuộc tính background-image như sau:
<!DOCTYPE html> <html> <head> <style> body { background-image: url('img_tree.gif'), url('paper.gif'); } </style> </head> <body> <h1>Thiết lập Background với nhiều hình ảnh</h1> </body> </html>
Kết quả: Thuộc tính background-image: url(‘img_tree.gif’), url(‘paper.gif’); đặt hai hình ảnh img_tree.gif và paper.gif được sử dụng làm nền.
Các câu hỏi thường gặp về background CSS
Có thể dùng transition để thay đổi background-color không?
Bạn hoàn toàn có thể thực hiện thay đổi background-color bằng thuộc tính transition CSS. Đầu tiên, bạn cần khai báo hai thuộc tính CSS này như ví dụ bên dưới:
/*Đặt background-color ban đầu*/ div { background-color: blue; } /*Thêm hiệu ứng transition */ div { transition: background-color 1s; } /*Thay đổi background color khi hover */ div:hover { background-color: red;
Kết quả: Đoạn code bên trên sẽ làm cho màu nền của phần tử div chuyển từ xanh sang đỏ trong 1 giây khi di chuột qua.
Khi nào nên dùng background-image?
- Hình ảnh không phải là nội dung chính: Sử dụng background-image khi hình ảnh được dùng để trang trí, tạo điểm nhấn chứ không phải là nội dung chính cần truyền tải. Ví dụ hình nền trang web, họa tiết trang trí trên các phần tử.
- Thay thế văn bản bằng hình ảnh: Sử dụng background-image để thay thế văn bản bằng hình ảnh (chỉ nên dùng trong trường hợp đặc biệt), ví dụ như logo, tiêu đề trang web được thiết kế bằng hình ảnh.
- In ấn trang web: Sử dụng background-image nếu bạn muốn in ấn trang web và không muốn hình ảnh nền được in ra theo mặc định.
- Giảm thời gian tải trang: Sử dụng background-image kết hợp với CSS sprites (ảnh ghép) để giảm thời gian tải trang bằng cách gom nhiều hình ảnh nhỏ thành một hình lớn.
- Chỉ hiển thị một phần của hình ảnh: Sử dụng background-image kết hợp với các thuộc tính khác như background-position để chỉ hiển thị một phần của hình ảnh (có thể kết hợp với CSS sprites).
- Điều chỉnh hình ảnh để lấp đầy background: Sử dụng background-image với thuộc tính background-size: cover để kéo giãn hình nền, phủ kín toàn bộ phần tử chứa.
Có nên tạo background với video không?
Câu trả lời phụ thuộc vào mục tiêu và đối tượng mục tiêu của trang web. Nếu bạn muốn tạo một trang web thu hút sự chú ý, tăng cường sự tương tác và thể hiện phong cách thương hiệu của mình, thì video nền có thể là một lựa chọn tốt. Tuy nhiên, cần đảm bảo rằng bạn đã tối ưu hóa video để tải nhanh, sử dụng video có chất lượng cao và tương thích với nhiều trình duyệt, thiết bị khác nhau.
Tổng kết Background CSS
Như vậy, bài viết đã đưa ra những hướng dẫn chi tiết về cách sử dụng 8 thuộc tính background CSS. Hy vọng những ví dụ minh hoạ tương ứng với từng nội dung giúp bạn dễ hình dung và hiểu rõ hơn về cách dùng chúng. Chúc bạn sớm thành thạo background CSS để tạo ra những trang web đẹp mắt và ấn tượng nhé.
Tham khảo các bài viết thuộc chủ đề CSS trên ITviec:
- Transition CSS là gì? Phân biệt transition CSS và animation CSS
- Border CSS: Hướng dẫn chi tiết 9 cách sử dụng border CSS
- Box shadow CSS là gì? 7 cách dùng box shadow CSS cơ bản
- Animation CSS: Tổng hợp 11 hiệu ứng Animation CSS phổ biến
- Tailwind CSS: Hướng dẫn 3 cách thiết lập Tailwind chi tiết
- Grid CSS: Cẩm nang sử dụng Grid CSS cơ bản
- Cách tạo Hover CSS và các ví dụ cụ thể