Để tạo kiểu nền cho các phần tử, bạn có thể đặt hình nền, vị trí nền. Cùng với đó, cũng đặt lặp lại nền để lặp lại hình ảnh theo chiều ngang hoặc chiều dọc.
background-position
Vị trí nền là đặt vị trí bắt đầu của ảnh nền. Đối với điều này, hãy sử dụng thuộc tính background-position.
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/images/Swift.png");
background-repeat: no-repeat;
background-attachment: fixed;
color: blue;
background-position: left center;
}
.demo {
text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html> Đầu ra
background-repeat
Lặp lại nền trong CSS được sử dụng để đặt cách lặp lại hình nền trên trang web. Đối với điều này, hãy sử dụng thuộc tính background-repeat. Sau đây có thể là các giá trị thuộc tính -
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/images/Swift.png");
background-repeat: repeat-x;
background-color: blue;
color: white;
}
.demo {
text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html> Đầu ra
