Background css là cách thiết lập màu nền, ảnh nền cho các thẻ HTML cũng như cho toàn bộ website, đây là một thuộc tính khá quan trọng mà bạn cần phải nắm vững vì hầu hết đều có sử dụng thuộc tính này để tạo background với các hình ảnh hoặc màu sắc cho website.
1. Tạo màu nền background-color
Thuộc tính background-color giúp định màu nền cho một thành phần nào đó trên trang web với giá trị là màu sắc của background. Có thể sử dụng mã màu hoặc tên tiếng anh của màu sắc.
[css]
body{
background-color: red;
}
[/css]
hoặc
[css]
body{
background-color: #fb0320;
}
[/css]
hoặc
[css]
body{
background: #fb0320;
}
[/css]
Cả 3 cách viết trên sẽ cho ta một trang web có nền là màu đỏ
Trong đó, giá trị của thuộc tính background-color có thể là:
- Mã màu hệ hex, ví dụ: #000000.
- Hệ màu RGB, ví dụ: rgb(255,255,0).
- Tên màu: red, blue, black.
2. Tạo hình nền background-image
Trường hợp mã màu đơn thuần không đủ đẹp mắt, thì chúng ta sẽ sử dụng thuộc tính background-image để định ảnh nền cho thành phần nào đó trên website.
[css]
body{
background: url(‘bg-image.png’);
}
[/css]
hoặc
[css]
body{
background-image: url(‘bg-image.png’);
}
[/css]
3. Cho phép lặp hoặc không lặp background
vấn đề lặp background này ta tìm hiểu 4 nội dụng là:
- no-repeat : không lặp
- repeat: cho phép lặp
- repeat-x : lặp theo chiều ngang
- repeat-y : lặp theo chiều đứng
no-repeat
[css]
body{
background-image: url(‘bg-image.png’);
background-repeat: no-repeat;
}
[/css]
repeat
[css]
body{
background-image: url(‘bg-image.png’);
background-repeat:repeat;
}
[/css]
repeat-x
[css]
body{
background-image: url(‘bg-image.png’);
background-repeat:repeat-x;
}
[/css]
repeat-y
[css]
body{
background-image: url(‘bg-image.png’);
background-repeat:repeat-y;
}
[/css]
4. Thiết lập vị trí hiển thị cho background
Khi sử dụng background không lặp và muốn background hiển thị ở một ví trí nào đó như center, left, right, … thì bạn sử dụng thuộc tính background-position.
[css]
background-position: po1 po2;
[/css]
các giá trị po1, po2 là: bottom: ở dưới, left: bên trái,right: bên phải,center: ở giữa,top: ở trên
Ví dụ: hiển thị background ở giữa
[css]
body{
background-image: url(‘bg-image.png’);
background-repeat: no-repeat;
background-position: center;
}
[/css]
5. Tạo ảnh nền đứng yên khi kéo thanh trượt
Nếu trang web dài quá thì khi bạn lăn chuột background sẽ kéo theo nên nếu bạn muốn nó đứng im thì sử dụng thuộc tính background-attachment. Nó có hai thuộc tính:
- fixed: sẽ đứng im
- scroll: sẽ di chuyển theo khi kéo
[css]
#demo{
background-image: url(‘bg-image.png’);
background-repeat: no-repeat;
background-attachment: fixed;
height: 1200px;
}
[/css]
thiết lập chiều cao 1200px là để xuất hiện thanh trượt
6. Viết tắt thuộc tính background
Trong số các ví dụ trên có thể thấy có 2 cách viết cho background là background và background-image(color,repeat,…), cách viết background này là dạng viết tắt.
[css]
h1{
background: url(‘bg-image.png’) no-repeat bottom fixed;
}
[/css]
[thongbao]
- Nếu có thắc mắc gì các bạn để lại comment bên dưới mình sẽ trả lời sớm nhất có thể.
- Cảm ơn các bạn đã đọc.
[/thongbao]