Màu nền
Thiết lập màu nền cho phần tử dùng thuộc tính CSS background-color
chỉ ra giá trị màu theo tên, hoặc theo mã hex, hoặc theo trộn rgb
<style> p.nen1 { background-color: #41c04d; } p.nen2 { background-color: rgb(135,206,235); } p.nen3 { background-color: coral; } </style> <p class="nen1">Ví dụ về màu nền #41c04d</p> <p class="nen2">Ví dụ về màu nền rgb(135,206,235)</p> <p class="nen3">Ví dụ về màu nền coral</p>
Ví dụ về màu nền #41c04d
Ví dụ về màu nền rgb(135,206,235)
Ví dụ về màu nền coral
Ảnh nền
Thuộc tính background-image
dùng để chỉ ra ảnh (địa chỉ url hoặc vị trí tương đối) được dùng làm nền cho phần tử.
Mặc định thuộc tính background-image lặp lại ảnh nền theo cả chiều đứng và ngang
Ví dụ bạn có url ảnh là: https://cdn2.iconfinder.com/data/icons/humano2/48x48/actions/gtk-orientation-landscape.png

Dùng ảnh đó làm nền cho một phần tử div như ví dụ:
<style> div.nen1 { background-image: url('https://cdn1.iconfinder.com/data/icons/flowers-7/128/flower_flowers_blossom-08-48.png'); background-color: whitesmoke; } div.nen1 p { color: red; font-size: 20px; font-weight: bold; text-shadow: white 2px 2px 1px; } </style> <div class="nen1"> <p>Ví dụ về ảnh nền với background-image</p> <p>Phần tử được tô bởi background-color rồi đên background-image</p> <p>Ví dụ về ảnh nền với background-image</p> </div>
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
Để chỉ ra nhiều ảnh nền trong thành phần url()
chỉ ra nhiều url ảnh cách nhau bởi dấu phảy ,
Lặp lại ảnh nền
Mặc định ảnh nền lặp lại theo cả chiều x và chiều y. Với thuộc tính thêm background-repeat
bạn có thể điều khiển tính lặp lại này, bằng các giá trị
repeat
lặp lại theo x, yrepeat-x
lặp theo chiều xrepeat-y
lặp theo chiều yno-repeat
không lặpinherit
kế thừa cha
<style> div.nen2 { background-image: url('https://cdn1.iconfinder.com/data/icons/flowers-7/128/flower_flowers_blossom-08-48.png'); background-repeat: repeat-x; background-color: whitesmoke; } div.nen2 p { color: red; font-size: 20px; font-weight: bold; text-shadow: white 2px 2px 1px; } </style> <div class="nen2"> <p>Ví dụ về ảnh nền với background-image</p> <p>Phần tử được tô bởi background-color rồi đên background-image</p> <p>Ví dụ về ảnh nền với background-image</p> </div>
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
background-attachment
Thuộc tính background-attachment
để điều khiển xem ảnh nền là cố định trong phần tử hoặc cuộn theo trang. Với các giá trị như fixed
nền không cuộn theo phần tử, scroll
cuộn theo
Ví dụ sau khi cuộn trang, phần tử di chuyển nhưng ảnh nền không di chuyển theo
<style> div.nen3 { background-image: url('https://cdn1.iconfinder.com/data/icons/flowers-7/128/flower_flowers_blossom-08-48.png'); background-color: whitesmoke; background-attachment: fixed; } </style> <div class="nen3"> <p>Ví dụ về ảnh nền với background-image</p> <p>Phần tử được tô bởi background-color rồi đên background-image</p> <p>Ví dụ về ảnh nền với background-image</p> </div>
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image