Ngọc Thanh - 32
- 13/07/2025
Ngọc Thanh 
Thuộc tính background trong CSS là một thuộc tính của 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:
Thuộc tính background trong CSS
Thuộc tính background trong CSS là gì?
Thuộc tính background trong CSS là một thuộc tính của 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.
Ví dụ Thuộc tính background trong CSS
Css background color
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css background color</title>
<style>
#bagr-color{width:200px;height:200px;margin-bottom:10px;background:#ff0000;float:left;}
</style>
</head>
<body>
<h1>Chạy thử Css background color</h1>
<div id="bagr-color">
</div>
</body>
</html>
Css background-image full màn hình
Hình ảnh làm background sẽ được full hết màn hình, nó sẽ mất đi một phần hình ảnh nhưng không đáng kể, nó giúp background có kích thước lớn trở nên tự nhiên hơn.
#bagr-imafmh{width:100%;height:100vh;float:left;background-repeat: no-repeat;background-size: cover; background-position: center center;background-image:url(https://webmoi.vn/media/images/background-image-full-man-hinh.jpg)}
Css background-image lấy hết hình ảnh
Nếu hình ảnh dùng làm background có kích thước lớn hơn nhiều so với kích thước của thẻ HTML thì cách backround này sẽ thu nhỏ hình ảnh đó vừa khung nhìn của thẻ HTML.
#bagr-imlhha{width: 40px; height: 40px; background: url(https://webmoi.vn/media/images/background-image-lay-het-hinh-anh.png) no-repeat; background-position: 5px center !important; background-size: 30px auto !important; border: 1px solid #ddd;}
Css background-image repeat
Bạn có hình ảnh kích thước nhỏ và thiết kế theo kiểu có thể lắp lại để ghép thành một backround lớn mà không bị xấu, repeat để lặp lại theo chiều rộng và chiều cao, repeat-x để lặp lại theo chiều rộng, repeat-y để lặp lại theo chiều cao.
#bagr-repeat{width:100%;height:400px;margin-bottom:10px;float:left;background-image: url("https://webmoi.vn/media/images/background-image-repeat.gif"); background-repeat: repeat;border:1px solid #ddd}
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 *
