Thuộc tính background trong CSS
Trần Ngọc Thanh - 573
- 13/07/2025
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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 *
