Cafedev chia sẻ về Background Image, Background Repeat trong CSS, cách load hình như thế nào và ví dụ?
Nội dung chính
1. CSS background-image
Thuộc tính background-image chỉ định một hình ảnh để sử dụng làm nền của một phần tử.
Theo mặc định, hình ảnh được lặp lại để nó bao phủ toàn bộ thành phần.
Ví dụ: Hình nền cho một trang có thể được đặt như thế này:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello Cafedev!</h1>
<p>This page has an image as the background!</p>
</body>
</html>
Ví dụ: này cho thấy một sự kết hợp xấu của văn bản và hình ảnh nền. Các văn bản hầu như chỉ có thể đọc được:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
</body>
</html>
Lưu ý: Khi sử dụng hình nền, hãy sử dụng hình ảnh không làm ảnh hưởng tới văn bản, gây khó đọc cho văn bản.
2. Background Repeat trong CSS
Theo mặc định, thuộc tính background-image lặp lại một hình ảnh theo cả chiều ngang và chiều dọc.
Một số hình ảnh chỉ nên được lặp lại theo chiều ngang hoặc chiều dọc, nếu không chúng sẽ trông lạ, như thế này:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
</body>
</html>Nếu hình ảnh trên chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;), nền sẽ trông tốt hơn:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}Mẹo: Để lặp lại hình ảnh theo chiều dọc, background-repeat: repeat-y;
3. Không lặp với Background-repeat: no-repeat
Chỉ hiển thị hình nền một lần bởi thuộc tính background-repeat:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}Trong ví dụ trên, hình nền được đặt ở cùng một nơi với văn bản. Chúng ta muốn thay đổi vị trí của hình ảnh, để nó không làm phiền văn bản quá nhiều.
4. Vị trí với background-position
Thuộc tính background-position được sử dụng để xác định vị trí của hình nền.
Ví dụ: Định vị hình ảnh nền ở góc trên bên phải:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
