Thuộc tính background-attachment
Cấu trúc
tag {
Thuộc tính: giá trị;
}- Thuộc tính background-attachment xác định thành phần nền được cố định hoặc cuộn so với trang.
- Được sử dụng kèm với giá trị background-image, Với url là đường dẫn tới hình được sử dụng làm hình nền.
- Nhấp vào nút chạy để xem kết quả
- Nhấp vào phần nội dung code để chỉnh sửa và nhấp nút chạy để xem kết quả.
<html>
<head>
<style type="text/css">
div {
background: url(https://tonghop.org/wp-content/uploads/2021/08/512x512.png) no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
<p>background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br /></p>
</div>
</body>
</html>Thuộc tính background-color
Thuộc tính background-color : xác định màu nền cho thành phần.
<html>
<head>
<style type="text/css">
div { background-color: blue; }
</style>
</head>
<body>
<div>
<p>background-color: xác định màu nền cho thành phần<br />
background-color: xác định màu nền cho thành phần<br />
background-color: xác định màu nền cho thành phần<br />
</p>
</div>
</body>
</html>Thuộc tính background-image
Thuộc tính background-image : xác định hình ảnh nền cho thành phần. Với url là đường dẫn tới hình được sử dụng làm hình nền.
<html>
<head>
<style type="text/css">
div {
background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
}
</style>
</head>
<body>
<div>
<p>
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
</p>
</div>
</body>
</html>Thuộc tính background-position
Thuộc tính background-position : xác định vị trí hình ảnh nền cho thành phần.
Được sử dụng kèm với giá trị background-image và background-repeat.
<html>
<head>
<style type="text/css">
div {
background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<div>
<p>
background-position<br />
background-position<br />
background-position<br />
background-position<br />
background-position<br />
background-position<br />
</p>
</div>
</body>
</html>background-position có các cặp giá trị như sau:
- background-position: left top; Hình nằm bên trái – phía trên thành phần (đây là dạng mặc định).
background-position: left bottom; Hình nằm bên trái – phía dưới thành phần
background-position: left center; Hình nằm bên trái – canh giữa thành phần - background-position: right top; Hình nằm bên phải – phía trên thành phần (đây là dạng mặc định).
background-position: right bottom; Hình nằm bên phải – phía dưới thành phần
background-position: right center; Hình nằm bên phải – canh giữa thành phần - background-position: center top; Hình nằm giữa – phía trên thành phần (đây là dạng mặc định).
background-position: center bottom; Hình nằm giữa – phía dưới thành phần
background-position: center center; Hình nằm giữa – canh giữa thành phần - background-position: 5px 15px; Hình nằm cách bên trái với khoảng cách bằng đơn vị – cách phía trên với khoảng cách bằng đơn vị.
Ví dụ: background-position: 5px 15px;
<html>
<head>
<style type="text/css">
p {
background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 10px;
}
</style>
</head>
<body>
<p>background-position</p>
</body>
</html>Thuộc tính background-repeat
Thuộc tính background-repeat : xác định hình ảnh nền được lặp như thế nào.
Được sử dụng kèm với giá trị background-image.
background-repeat: repeat-x;
<html>
<head>
<style type="text/css">
div {
background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>background-repeat: repeat-y;
<html>
<head>
<style type="text/css">
div {
background-image: url(bg_webstd.gif);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>background-repeat: repeat;
<html>
<head>
<style type="text/css">
div {
background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
background-repeat: repeat;
}
</style>
</head>
<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>background-repeat: no-repeat;
<html>
<head>
<style type="text/css">
div {
background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>Chú ý: Thuộc tính background
Thuộc tính background : Có giá trị riêng lẻ hoặc tổng hợp các thuộc tính background-color, background-image, background-repeat, background-position, background-attachment.
Cách viết như sau:
background: color image repeat position attachment;
Ví dụ: background: #990000 url(bg_webstd.gif) no-repeat left top fixed;
<html>
<head>
<style type="text/css">
div {
background: #990000 url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png) no-repeat left top;
}
</style>
</head>
<body>
<div>
<p>background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br /></p>
</div>
</body>
</html>