CSS Background
Thuộc tính CSS Background được sử dụng để xác định hiệu ứng nền trên thành phần. Có 5 thuộc tính nền CSS ảnh hưởng đến các thành phần HTML:
Thuộc tính hình ảnh nền được sử dụng để đặt hình ảnh làm nền của một yếu tố. Theo mặc định, hình ảnh bao gồm toàn bộ thành phần. Bạn có thể đặt hình nền cho một trang như thế này.
Thuộc tính CSS Background được sử dụng để xác định hiệu ứng nền trên thành phần. Có 5 thuộc tính nền CSS ảnh hưởng đến các thành phần HTML:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
1) Màu nền CSS
Thuộc tính màu nền được sử dụng để chỉ định màu nền của phần tử.
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello Javatpoint. This is an example of CSS background-color.</p>
</body>
</html>
2) CSS background-image
Thuộc tính hình ảnh nền được sử dụng để đặt hình ảnh làm nền của một yếu tố. Theo mặc định, hình ảnh bao gồm toàn bộ thành phần. Bạn có thể đặt hình nền cho một trang như thế này.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello tienanhvn.com</h1>
</body>
</html>
3) CSS background-repeat
Theo mặc định, thuộc tính hình ảnh nền lặp lại hình ảnh nền theo chiều ngang và chiều dọc. Một số hình ảnh được lặp lại chỉ theo chiều ngang hoặc chiều dọc.
Nền trông đẹp hơn nếu hình ảnh chỉ lặp lại theo chiều ngang.
background-repeat: repeat-x;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello tienanhvn.com</h1>
</body>
</html>
background-repeat: repeat-y;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello tienanhvn.com</h1>
</body>
</html>
4) CSS background-attachment
Thuộc tính đính kèm nền được sử dụng để chỉ định nếu hình nền được cố định hoặc cuộn với phần còn lại của trang trong cửa sổ trình duyệt. Nếu bạn đặt cố định hình nền thì hình ảnh sẽ không di chuyển trong khi cuộn trong trình duyệt. Hãy lấy một ví dụ với hình nền cố định.
background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed;
5) CSS background-position
Thuộc tính vị trí nền được sử dụng để xác định vị trí ban đầu của hình nền. Theo mặc định, hình nền được đặt ở phía trên bên trái của trang web.
Bạn có thể đặt các vị trí sau:
- center
- top
- bottom
- left
- right
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;