Thuộc tính background trong CSS
Trần Thị Vân - 1274
- 13/07/2025
Chức năng của Thuộc tính background trong CSS
Thuộc tính background trong CSS dùng để tạo màu nền và hình nền cho thẻ HTML, giúp hình nền của HTML trở nên đẹp hơn và chuyên nghiệp hơn, giúp mô tả chủ đề chính xác hơn.
Cú pháp của Thuộc tính background trong CSS
background:color url(duongdanhinh1), url(duongdanhinh2) vitri position/size repeat
color: Dùng cho màu sắc như: #ff0000, blue, background:rgb(201, 76, 76), background:rgba(201, 76, 76, 0.3), background:hsl(89, 43%, 51%), background:hsla(89, 43%, 51%, 0.3).
duongdanhinh1, duongdanhinh2: Đường dẫn đến các hình ảnh dùng làm hình nền.
position/size: position hoặc size
position: dùng để lấy vị trí của hình nền đặt vào vị trí của phần tử HTML (nếu kích thước hình nền nhỏ thì sẽ dễ thấy hơn):
size: dùng để quy định cách áp đặt diện tích của hình nền vào diện tích của phần tử HTML, ví dụ 300px 300px.
repeat: Dùng để quy định cách lặp lại của một hay nhiều background hình ảnh, các giá trị bao gồm: repeat, no-repeat, repeat-x, repeat-y, space, round
Ví dụ Thuộc tính background trong CSS
Thuộc tính background bằng màu sắc trong CSS
background:#ff0000;
background:blue;
background:rgb(201, 76, 76);
background:rgba(201, 76, 76, 0.3);
background:hsl(89, 43%, 51%);
background:hsla(89, 43%, 51%, 0.3);
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background bằng màu sắc trong CSS</title>
<style>
#bagr-color{width:100%;height:50px;margin-bottom:10px;float:left; margin-bottom:10px}
h4{margin:0px; padding:0px}
</style>
</head>
<body>
<h1>Thuộc tính background bằng màu sắc trong CSS</h1>
<h4>background:#ff0000;</h4>
<div id="bagr-color" style="background:#ff0000;"></div>
<h4>background:blue;</h4>
<div id="bagr-color" style="background:blue;"></div>
<h4>background:rgb(201, 76, 76);</h4>
<div id="bagr-color" style="background:rgb(201, 76, 76);"></div>
<h4>background:rgba(201, 76, 76, 0.3);</h4>
<div id="bagr-color" style="background:rgba(201, 76, 76, 0.3);"></div>
<h4>background:hsl(89, 43%, 51%);</h4>
<div id="bagr-color" style="background:hsl(89, 43%, 51%);"></div>
<h4>background:hsla(89, 43%, 51%, 0.3);</h4>
<div id="bagr-color" style="background:hsla(89, 43%, 51%, 0.3);"></div>
</body>
</html>
Thuộc tính background một hình ảnh trong CSS
Mặc định hình ảnh sẽ tự động lặp lại bằng giá trị repeat, nếu bạn không muốn lặp lại thì để no-repeat, ví dụ: background: url('https://webmoi.vn/thumuc/bg-nho.jpg') no-repeat;
background: url('https://webmoi.vn/thumuc/bg-nho.jpg');
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background một hình ảnh trong CSS</title>
<style>
body {
color:yellow
}
</style>
</head>
<body style="background: url('https://webmoi.vn/thumuc/bg-nho.jpg');">
<h1>Thuộc tính background một hình ảnh trong CSS</h1>
<p>Mặc định hình ảnh sẽ tự động lặp lại bằng giá trị repeat, nếu bạn không muốn lặp lại thì để no-repeat, ví dụ: background: url('https://webmoi.vn/thumuc/bg-nho.jpg') no-repeat;</p>
</body>
</html>
Thuộc tính background màu nền kết hợp hình ảnh trong CSS
Để hiện cả màu nền và background hình ảnh thì hình ảnh không được lặp lại để hiện thêm màu nền nên dùng no-repeat (background: url('https://webmoi.vn/thumuc/bg-cay.png.jpg') no-repeat;).
Để hình nền hiện góc phải dưới thì dùng thêm bottom right, chiều cao body tự động tràn xuống theo nội dung chữ.
background: blue url('https://webmoi.vn/thumuc/bg-cay.png') bottom right no-repeat;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background màu nền kết hợp hình ảnh trong CSS</title>
<style>
body {
color:yellow
}
</style>
</head>
<body style="background: blue url('https://webmoi.vn/thumuc/bg-cay.png') bottom right no-repeat;">
<h1>Thuộc tính background màu nền kết hợp hình ảnh trong CSS</h1>
<p>Để hiện cả màu nền và background hình ảnh thì hình ảnh không được lặp lại để hiện thêm màu nền nên dùng no-repeat (background: url('https://webmoi.vn/thumuc/bg-cay.png.jpg') no-repeat;)</p>
<p>Để hình nền hiện góc phải dưới thì dùng thêm bottom right, chiều cao body tự động tràn xuống theo nội dung chữ</p>
</body>
</html>
Thuộc tính background kết hợp nhiều hình nền trong CSS
Hình nền một không lặp lại nên để no-repeat, hình nền 2 lặp lại nên để repeat.
Hình nền một canh ở góc phải dưới, chiều cao của body tăng theo nội dung.
background: url('https://webmoi.vn/thumuc/bg-cay.png') no-repeat bottom right, url('https://webmoi.vn/thumuc/bg-nho.jpg') repeat;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background kết hợp nhiều hình nền trong CSS</title>
<style>
body {
color:yellow
}
</style>
</head>
<body style="background: url('https://webmoi.vn/thumuc/bg-cay.png') no-repeat bottom right, url('https://webmoi.vn/thumuc/bg-nho.jpg') repeat;">
<h1>Thuộc tính background kết hợp nhiều hình nền trong CSS</h1>
<p>Hình nền một không lặp lại nên để no-repeat, hình nền 2 lặp lại nên để repeat</p>
<p>Hình nền một canh ở góc phải dưới, chiều cao của body tăng theo nội dung</p>
</body>
</html>
Cách kết hợp các thuộc tính Background trong CSS
Giá trị của thuộc tính background không nằm ở việc sử dụng từng thuộc tính riêng lẻ, mà còn ở khả năng kết hợp chúng để kiểm soát màu sắc, hình ảnh và vị trí nền trên cùng một phần tử. Khi phối hợp đúng, giao diện sẽ trực quan hơn mà vẫn giữ được mã CSS gọn gàng.
Kết hợp màu nền và hình nền trong CSS
CSS cho phép một phần tử có cả màu nền và hình nền. Màu nền có thể đóng vai trò lớp phía sau, trong khi hình ảnh được đặt phía trên. Cách này đặc biệt hữu ích khi hình nền có vùng trong suốt hoặc khi muốn tạo một màu nền dự phòng.
.banner {
background-color: #f3f3f3;
background-image: url("banner.jpg");
}
Nếu hình ảnh không tải được, màu nền vẫn có thể được hiển thị thay thế. Đây là cách đơn giản để tăng tính ổn định cho phần giao diện sử dụng hình nền.
Kết hợp Background Image với Background Size
Khi sử dụng hình nền, background-size quyết định kích thước hình ảnh bên trong khu vực nền. Hai thuộc tính này thường được dùng cùng nhau để hình ảnh phủ đầy một khu vực mà không cần chèn trực tiếp bằng thẻ img.
.banner {
background-image: url("banner.jpg");
background-size: cover;
}
Giá trị cover giúp hình ảnh bao phủ toàn bộ khu vực, nhưng một phần ảnh có thể bị cắt. Nếu muốn giữ toàn bộ hình ảnh, có thể sử dụng contain tùy theo mục đích thiết kế.
Kết hợp Background Position và Background Repeat
background-position xác định vị trí hình nền, còn background-repeat kiểm soát việc hình ảnh có lặp lại hay không. Kết hợp hai thuộc tính này giúp kiểm soát chính xác cách hình nền xuất hiện.
.box {
background-image: url("pattern.png");
background-position: center;
background-repeat: no-repeat;
}
Cách thiết lập trên phù hợp với những hình nền chỉ muốn xuất hiện một lần tại vị trí trung tâm. Với các họa tiết nhỏ dùng để tạo nền lặp, có thể thay no-repeat bằng giá trị lặp phù hợp.
Kết hợp nhiều thuộc tính Background để tạo giao diện
Một khu vực giao diện có thể cần đồng thời màu nền, hình ảnh, vị trí, kích thước và cách lặp. Thay vì xem từng thuộc tính độc lập, nên xác định trước mục đích của vùng nền rồi thiết lập các giá trị liên quan.
.hero {
background-color: #eeeeee;
background-image: url("hero.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
Cách kết hợp này thường phù hợp với khu vực giới thiệu, banner hoặc phần đầu của một trang. Việc tách từng thuộc tính thành dòng riêng cũng giúp dễ kiểm tra và thay đổi khi giao diện cần chỉnh sửa.
Sử dụng thuộc tính Background dạng viết tắt
Khi đã hiểu rõ vai trò của từng thuộc tính, có thể dùng background để viết nhiều thiết lập nền trên cùng một dòng. Cách viết này giúp mã CSS ngắn hơn nhưng cần sắp xếp giá trị rõ ràng để tránh nhầm lẫn.
.hero {
background: #eeeeee url("hero.jpg") center / cover no-repeat;
}
Với các đoạn CSS đơn giản, cách viết tắt giúp mã nguồn gọn hơn. Tuy nhiên, khi dự án có nhiều thiết lập hoặc cần bảo trì thường xuyên, tách từng thuộc tính vẫn có thể dễ đọc và kiểm soát hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính background trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
