Background là một trong những thuộc tính cần thiết trong CSS. Nó dùng để trang trí và tạo background (màu nền) giúp trang web sống động bắt mắt hơn. Bài viết này sẽ giúp bạn tìm hiểu về thuộc tính Background trong CSS đầy đủ nhất.
Các thuộc tính mở rộng của Background CSS:
background-color: Thiết lập màu nền cho trang web
background-image: Thiết lập hình ảnh nền cho trang web HTML
background-repeat: Sự lặp lại của hình nền
background-attachment: Thiết lập vị trí cố định cho hình nền
background-position: Thiết lập vị trí cho hình nền
Các thuộc tính Background trong CSS
Đầu tiên bạn sẽ chạy đoạn mã sau đây:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Đây là ví dụ thuộc tính background</h1>
</body>
</html>
Background-color
Thuộc tính background color trong CSS giúp bạn thiết lập màu nền dễ dàng. Giá trị màu sắc sẽ được viết theo 3 kiểu:
– Tên màu như Red, Green, Blue…
– Mã màu Hex như #FFFFFF, #345345…
– Giá trị RGB như rgb(105,105,105), rgb(178,34,34)…
– Hoặc trong suốt thì dùng background: transparent;
Bãn sẽ thay thế các giá trị vào dòng chữ màu đỏ ở đoạn ví dụ trên để xem kết quả nhé!
Background-image:
Thuộc tính Background image dùng để lấy chèn ảnh vào background trong HTML và CSS. Với background-image nó sẽ đưa hình nền vào trang web. Hãy thử đoạn code chèn ảnh sau trong sublime text.
background-image:url(https://quachquynh.com/wp-content/uploads/2023/03/css-background-2.png);
Background-repeat:
Background repeat dùng để lặp lại hình nền theo chiều ngay hoặc chiều dọc.
Ví dụ:
background-repeat: repeat;
Với code này nó sẽ tự động lặp vô hạn có nghĩa là lặp hàng ngang trước sau khi hết dòng nó lại tiếp tục lặp dòng tiếp theo.
Để lặp chiều ngang dùng:
background-repeat: repeat-x;
Để lặp chiều dọc dùng:
background-repeat: repeat-y;
Cũng ví dụ trên bạn thay đoạn CSS như sau:
background-image:url(https://quachquynh.com/wp-content/uploads/2023/03/css-background-2.png); background-repeat: repeat; background-size: 200px;
Background-position
Background position dùng để thiết lập vị trí cho hình nền bạn có thể đặt nó bên trái, bên phải hay bên trên xuống dưới tuỳ ý.
Cú pháp: background-position: top | right | bottom | left;
Ví dụ:
body {
background-image:url(https://quachquynh.com/wp-content/uploads/2023/03/css-background-2.png);
background-repeat: no-repeat;
background-size: 300px;
Background-position: top right;
}
p {
color: red;
}
Background-attachment:
Background attachment giúp thiết lập một vị trí cố định cho hình nền khi bạn dùng thanh trượt trang web xuống dưới thì hình nền vẫn nằm yên một chỗ.
Ví dụ:
body {
height: 1000px;
background-image:url(https://quachquynh.com/wp-content/uploads/2023/03/css-background-2.png);
background-repeat: no-repeat;
background-size: 300px;
Background-position: top right;
Background-attachment: fixed;
}
p {
color: red;
}
Background-size:
Background size trong CSS sẽ giúp bạn thiết lập chiều cao và rộng của hình nền.
Cú pháp:
background-size: auto|length|cover|contain|initial|inherit;
Giải thích:
auto: co giãn tự động
cover: bao phủ toàn bộ. Thường dùng làm background full màn hình HTML
contain: co hình nền theo chiều rộng còn chiều cao sẽ tỉ lệ theo chiều rộng
inherit: thừa hưởng tính chất từ phần tử cha
Hoặc:
background-size: 75% 50%;
Hoặc:
background-size: 300px 100px;
Ví dụ:
body {
height: 1000px;
background-image:url(https://quachquynh.com/wp-content/uploads/2023/03/css-background-2.png);
background-repeat: no-repeat;
background-size: 300px 100px;
}
p {
color: red;
}
Cách viết rút gọn thuộc tính Background
Viết gọn hay gộp các thuộc tính lại sẽ có lợi về tốc độ khi load trang web. Dưới đây là cách rút gọn code đơn giản:
background: #eeeeee url(https://quachquynh.com/wp-content/uploads/2023/03/css-background-2.png) no-repeat top right;
Trên đây là các thuộc tính Background trong CSS quen thuộc thường được sử dụng. Để tạo trang web đẹp chắc chắn bạn không thể bỏ qua các thuộc tính này.
