9 cách sử dụng background (nền) trong CSS

Background là thuộc tính quan trọng trong CSS, nó được dùng để tạo nền cho các thẻ mà dễ thấy nhất là thẻ body. Nền có hai kiểu: nền màu và nền dùng ảnh.

Nền màu là cách dùng nền phổ biến hơn cả, hầu hết các trang web đều sử dụng nền cho toàn trang là màu đơn sắc nào đó có khuynh hướng gần với màu trắng, nều màu cho các phần khác của trang thì đa dạng hơn.

Có một số thuộc tính của background chỉ được hỗ trợ trong CSS3. Còn dưới đây là danh sách các thuộc tính chúng ta sẽ tìm hiểu trong ngày hôm nay:

1. background-color;
2. background-image;
3. background-repeat;
4. background-position;
5. background-attachment;
6. background-size;
7. background-clip;
8. background-origin;
9. viết tắt trong background;

---

Thuộc tính background-color

Cách dùng nền màu khá đơn giản, chẳng hạn:

body {background-color:#FF7357;}

hoặc:

h3 {background-color:#2E58FF;}

Còn bây giờ bạn sẽ thấy kết quả khi áp dụng đoạn code trên cho thẻ h3:

Tôi tạo nền cho thẻ h3 này có màu xanh

Như vậy là bạn đã kết thúc với cách dùng màu nền! Còn những 4 thuộc tính background khác nhưng tất cả đều liên quan đến sử dụng nền là ảnh.

Nền ảnh thường tạo cho trang mức độ cá tính nào đó. Các trang thiên về mỹ thuật hoặc muốn tạo ấn tượng nên dùng thuộc tính này. Nếu trang web có lượng truy cập nhiều, dùng nền ảnh kích cỡ lớn cần phải cân nhắc.

---

Thuộc tính background-image

Nếu muốn sử dụng nền là ảnh bạn khai báo như sau:

body {background-image: url('duong-dan-anh.jpg');}

Theo mặc định nếu ảnh nhỏ hơn nền thì nó sẽ lặp lại (repeat) theo cả hai chiều cho đến khi lấp đầy nền thì thôi.

Trong phần khai báo URL bạn có thể dùng địa chỉ ảnh từ trang của bạn hoặc bất kỳ địa chỉ ảnh nào trên mạng.

Giờ tôi sẽ tiến hành tạo ảnh nền cho thẻ div, cái thứ nhất là ảnh to bằng với nền, cái thứ hai thì ảnh nhỏ hơn nền.

<div style="background-image: url('http://cdn.kiencang.net/wp-content/uploads/2021/02/background.jpg'); color: white; font-size: 40px; height: 300px; width: 400px;">Ảnh to bằng nền</div>

Kết quả:

---

Ảnh nền nhỏ, code mẫu:

<div style="background-image: url('http://cdn.kiencang.net/wp-content/uploads/2021/02/background-nho.jpg'); color: white; font-size: 40px; height: 300px; width: 400px;">Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền</div>

Kết quả:

---

Thuộc tính background-repeat

Cái này chuyên dùng cho những ảnh nhỏ hơn nền, như ví dụ trên bạn đã thấy, khi ảnh nhỏ hơn nền thì theo mặc định nó sẽ lặp lại để lấp đầy khoảng không của background thì mới thôi, bạn có quyền chỉ định cách lập lại chỉ theo chiều nhất định nào đó.

• Nếu chỉ cho phép lặp lại theo chiều ngang thì viết: background-repeat: repeat-x;
• Nếu chỉ cho phép lặp lại theo chiều dọc thì viết: background-repeat: repeat-y;
• Nếu bạn không muốn ảnh nền lặp lại dù nó có nhỏ hơn nền thì viết: background-repeat: no-repeat;

Ví dụ chỉ lặp lại theo chiều ngang (tôi thêm viền của hộp cho bạn dễ nhìn):

---

Code mẫu:

<div style="background-image: url('http://cdn.kiencang.net/wp-content/uploads/2021/02/background-nho.jpg'); background-repeat: repeat-x; color: yellow; font-size: 40px; height: 150px; width: 400px;"></div>

---

Ví dụ chỉ lặp lại theo chiều dọc (tôi thêm viền của hộp cho bạn dễ nhìn):

---

Code mẫu:

<div style="background-image: url('http://cdn.kiencang.net/wp-content/uploads/2021/02/background-nho.jpg'); background-repeat: repeat-y; color: yellow; font-size: 40px; height: 150px; width: 400px;"></div>

Bạn có thể thấy một phần không gian của nền chưa được lấp đầy do ảnh nền chỉ được lặp theo 1 chiều.

Lặp lại ảnh theo chiều nào đó (hoặc cả 2 chiều) rất hay dùng trong trường hợp bạn muốn tiết kiệm dung lượng tải về, đặc biệt là đối với các hoa văn họa tiết có tính lặp lại hoặc nền có kích thước không biết trước. Thay vì dùng ảnh lớn đến 200 – 500KB, bạn có thể dùng ảnh chỉ độ 5 – 10KB và lặp lại nó để tạo nền ấn tượng.

---

Thuộc tính background-attachment

Đây là thuộc tính giúp xác định vị trí tương đối của nội dung so với ảnh nền. Theo mặc định, giá trị này là scroll, nghĩa là ảnh sẽ yên vị làm nền.

Trường hợp bạn để fixed thì ảnh nền sẽ di chuyển theo nội dung (background-attachment:fixed;). Để dùng thuộc tính background-attachment bạn phải để background-repeat: no-repeat;

Nếu nội dung bài viết dài thì thường ảnh sẽ không đủ độ lớn bao trùm nền cả trang web, khi đó bạn nên dùng giá trị fixed.

Xem ví dụ bạn sẽ thấy dễ hiểu hơn, di chuyển thanh cuộn dọc để thấy sự khác biệt.

---

<div style="background-image: url('http://cdn.kiencang.net/wp-content/uploads/2021/02/background.jpg'); background-repeat: no-repeat; color: #6aa84f; font-size: 40px; height: 300px; width: 400px;">background-attachment theo mặc định</div>

---

---

<div style="background-attachment: fixed; background-image: url('http://cdn.kiencang.net/wp-content/uploads/2021/02/background.jpg'); background-repeat: no-repeat; color: #6aa84f; font-size: 40px; height: 300px; width: 400px;">background-attachment có giá trị fixed</div>

---

Thuộc tính background-position

Bạn sử dụng thuộc tính này để quy định vị trí của ảnh so với nền, đa số chỉ dùng trong trường hợp ảnh nhỏ hơn nền, về từ khóa có 8 giá trị cho bạn chọn lựa:

• left-top: góc bên trái phía trên;
• left-center: bên trái chính giữa;
• left-bottom: góc bên trái phía dưới;
• right-top: góc bên phải phía trên;
• right-center: bên phải chính giữa;
• right-bottom: góc bên phải phía dưới;
• center-top: bên trên chính giữa;
• center-center: ngay tại trung tâm;
• center-bottom: bên dưới chính giữa;

Ngoài ra là sử dụng giá trị cụ thể, nó giúp bạn điều chỉnh vị trí của ảnh nền tại bất cứ đâu mà bạn muốn, thí dụ:

div
{
background-image:url('http://cdn.kiencang.net/wp-content/uploads/2021/02/background-nho.jpg');
background-repeat:no-repeat;
background-position:30px 50px;
}

Kết quả:

---

Thuộc tính background-size

Tôi rất ít khi dùng thuộc tính này, nhưng điều ấy không có nghĩa là chúng ta không bao giờ sử dụng, và sẽ thiếu sót nếu không đề cập đến nó.

Trước CSS3, ảnh được làm nền lấy kích thước thực của nó ban đầu, giờ đây với background-size, bạn quyết định ảnh nền có giá trị cụ thể là bao nhiêu tùy ý, code mẫu:

<div style="background-image: url('http://cdn.kiencang.net/wp-content/uploads/2021/02/z-index.jpg'); background-repeat: no-repeat; background-size: 160px 120px; border: 3px solid #000; height: 300px; width: 400px;"></div>

Kết quả:

---

Ảnh gốc:

---

Thuộc tính background-clip

Đây cũng là thuộc tính mới trong CSS3, border-clip quy định mức độ phủ của nền màu (không áp dụng cho nền là ảnh), chúng ta có 3 giá trị:

• border-box: đây là giá trị mặc định, nghĩa là nền bao phủ đến tận đường viền, thông thường thì cũng như thế rồi, nên bạn chỉ thấy khác biệt ở những giá trị sau…
• padding-box: nghĩa là nền chỉ bao phủ đến padding mà không bao gồm đường viền.
• content-box: nghĩa là nền chỉ bao phủ phần nội dung, không gồm padding và viền.

OK, giờ là lúc đến các ví dụ minh họa cụ thể, nó sẽ giúp đỡ chúng ta hiểu rõ hơn:

#box
{
padding:20px;
border:5px dotted #000000;
background-color:red;
background-clip:border-box;
}

Kết quả:

---

<div style="background-clip: border-box; background-color: red; border: 5px dotted #000000; padding: 20px;">Đây là border-box</div>

---

---

<div style="background-clip: padding-box; background-color: red; border: 5px dotted #000000; padding: 20px;">Đây là paddingbox</div>

Và cuối cùng:

---

<div style="background-clip: content-box; background-color: red; border: 5px dotted #000000; padding: 20px;">Đây là content-box</div>

Bạn đã thấy khác biệt rất rõ nét giữa các box do các giá trị khác nhau của border-clip tạo ra.

---

Thuộc tính background-origin

Về cơ bản, background-origin rất giống background-clip, cũng có các giá trị như thế: border-box; padding-box; content-box.

Tuy nhiên background-clip là áp dụng cho nền màu, còn background-origin là áp dụng cho nền ảnh, ngoài ra – điểm khác biệt nữa – giá trị mặc định của background-origin là padding-box chứ không phải border-box.. Các ví dụ.

Code mẫu:

#box {
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-size: 80px 60px;
border: 5px dotted #000;
padding: 20px;
width: 400px;
background-origin: border-box;
}

Kết quả:

---

<div style="background-image: url('http://cdn.kiencang.net/wp-content/uploads/2021/02/z-index.jpg'); background-origin: border-box; background-repeat: no-repeat; background-size: 80px 60px; border: 5px dotted #000; padding: 20px; width: 400px;">Bạn đã thấy ảnh làm nền ngay cả cho viền của hộp? Đây chính là giá trị border-box của background-origin.</div>

---

padding-box:

---

<div style="background-image: url('http://cdn.kiencang.net/wp-content/uploads/2021/02/z-index.jpg'); background-origin: padding-box; background-repeat: no-repeat; background-size: 80px 60px; border: 5px dotted #000; padding: 20px; width: 400px;">Ảnh không làm nền cho viền nữa, đây là cách mà bạn hay thấy nhất, nó cũng là giá trị mặc định của background-origin, là padding-box.</div>

---

content-box:

---

<div style="background-image: url('http://cdn.kiencang.net/wp-content/uploads/2021/02/z-index.jpg'); background-origin: content-box; background-repeat: no-repeat; background-size: 80px 60px; border: 5px dotted #000; padding: 20px; width: 400px;">Cuối cùng, ảnh không nằm ở đường viền, cũng không nằm ở phần padding mà chỉ làm nền cho nội dung của box. Vâng, đây là giá trị cuối cùng của background-origin, là content-box.</div>

---

Viết tắt khi dùng Background

Để các dòng code được ngắn hơn, thay vì viết rõ tất cả các thuộc tính và các giá trị trên từng dòng, chúng ta có thể khai báo thuộc tính duy nhất rồi khai báo đồng thời các giá trị khác đi kèm.

Khai báo tắt cho tất cả các thuộc tính của background, bạn đơn giản sử dụng từ khóa background thôi.

Code mẫu:

 #box {background:red url('bg.jpg') no-repeat right top;} 

Vậy là thay vì phải viết background-color, background-image, background-repeat, background-position, bạn chỉ phải viết duy nhất một dòng.