Thuộc tính Background trong CSS

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 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.

Thuộc tính Background trong CSS

Các thuộc tính mở rộng của Background:

background-color: Thiết lập màu nền cho trang web
background-image: Thiết lập hình nền cho trang web
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

Bắt đầu tìm hiểu từng thuộc tình background nào!

Đầ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)…

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:

Background image dùng để lấy một hình ảnh nào đó là hình nền cho trang web. Cũng ví dụ trên bạn thay dòng màu đỏ bằng

background-image:url(https://quachquynh.com/wp-content/uploads/2020/02/css-background.png);

thuoc-tinh-background-image

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/2020/02/css-background.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/2020/02/css-background.png);
background-repeat: no-repeat;
background-size: 300px;
Background-position: top right;
}

p {
color: red;
}

Thuộc tính Background Position

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/2020/02/css-background.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/2020/02/css-background.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/2020/02/css-background.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.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments