Thuộc tính tô nền phần tử background trong CSS

Tô nền với thuộc tính background

Thuộc tính background để thiết lập tô nền cho box, thuộc tính này là cách viết ngắn gọn, kết hợp lại các thuộc tính: background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, background-color,

Các thuộc tính riêng lẻ background-* có thể viết gộp lại tạo thành một lớp tô nền và đưa vào background, có thể tạo ra nhiều lớp nền cách nhau bởi dấu phảy ,

Cú pháp sử dụng background

background: layer1, layer2, ...

Trong đó layer1, layer2 ... là một lớp nền cú cú pháp:

    <background-image> || <background-position> [ / <background-size> ]? || 
    <background-repeat> || <background-attachment> || <background-clip> || 
    <background-color> 

Trong đó nếu giá trị nào thiếu thì nó sẽ nhận giá trị mặc định, cụ thể giá trị mặc định gồm:

background-image:       none;
background-position:    0% 0%;
background-size:        auto auto;
background-repeat:      repeat;
background-origin:      padding-box;
background-clip:        border-box;
background-attachment:  scroll;
background-color:       transparent;

Ví dụ:

.vidu1 {
    background: url(https://images.freeimages.com/images/previews/ecb/colorful-tulips-1338460.jpg)
    center / contain no-repeat border-box green
}

Thì tương đương viết chi tiết:

.vidu1 {
    background-image: url(https://images.freeimages.com/images/previews/ecb/colorful-tulips-1338460.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-clip: border-box;
    background-color: green;
}

Để ý, nếu có thiết lập background-size thì nó viết sau background-position và ký kiệu /

Tô nền nhiều lớp background

Thuộc tính background cho phép chỉ ra nhiều lớp nền, mỗi lớp nền cách nhau bởi dấu phảy. Chỉ chú ý, chỉ có lớp nền cuối cùng trong khai báo (khi render thì thực hiện đầu tiên) mới được thiết lập giá trị background-color nếu có

.vidu2 {
    background:

            /*Lớp nền thứ sáu: hình trái tim biên trên của box*/
            url(https://cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png)
            0 0 round no-repeat,

            /*Lớp nền thứ năm: hình trái tim biên dưới của box*/
            url(https://cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png)
            bottom left round no-repeat,

            /*Lớp nền thứ tư: hình trái tim bên trái của box*/
            url(https://cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png)
            top left no-repeat round,

            /*Lớp nền thứ ba: hình trái tim bên cạnh phải của box*/
            url(https://cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png)
            top right no-repeat round,

            /*Lớp nền thứ hai tô một ảnh vừa box*/
            url(https://images.freeimages.com/images/previews/ecb/colorful-tulips-1338460.jpg)
            center / contain no-repeat,

            /*Lớp nền đầu tiên - tô màu xanh*/
            darkblue;

}