Màu nền background-color anh nền background-image với CSS

• Màu nền - background-color
• Ảnh nền - background-image
• Thiết lập lặp lại ảnh nền - background-repeat
• Cố định ảnh nền - background-attachment

Màu nền với thuộc tính css background-color

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. Hãy xem phần màu sắc và thuộc tính color để biết tên các màu.

Chú ý là ngoài màu nền cho phần tử với thuộc tính background-color thì còn có thể thiết lập nhiều lớp nền là ảnh nền cho phần tử bằng thuộc tính background-image. Màu nền được vẽ sau ảnh nền (nếu có).

<style>
    .nen1 {
        background-color: #41c04d;
    }
    .nen2 {
        background-color: rgb(135,206,235);
    }
    .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

Chú ý màu nền được tô trong phạm vi (tô phần content, tô cả phần padding, hay cả phần border) được thiết lập thông qua thuộc tính background-clip

Ảnh nền với background-image

Thuộc tính background-image dùng để chỉ ra ảnh được dùng làm nền cho phần tử. Nó được vẽ trên màu nền của phần tử.

Cú pháp:

background-image: image | none

Trong đó:

• none : thiết lập không có ảnh nền cho phần tử
• image: là ảnh làm nền, thường dùng hàm url(địa-chỉ-url-ảnh) hoặc hàm linear-gradient hay hàm radial-gradient

Mặc định thuộc tính background-image lặp lại ảnh nền theo cả chiều đứng và ngang để tô kín kích thước phần tử.

Ví dụ bạn có url ảnh là: https://cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png

Dùng ảnh đó làm nền cho một phần tử div như ví dụ:

<style>
    .nen4 {
        background-image: url('https://cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png');
        background-color: pink;
    } 
</style>

<div class="nen4">
    <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>

.nen {
    background-image: url(url-image1), url(url-image2);
}

Lặp lại ảnh nền: background-repeat

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ị

Cú pháp:

background-repeat: valuex valuey;

Trong đó: valuex và valuey là kiểu lặp lại theo chiều x và y có thể nhận

• repeat - lặp lại (ảnh có thể bị cắt tại biên của box)
• space - lặp lại - dàn ảnh có khoảng cách sao cho ảnh không bị cắt tại biên
• round - lặp lại - ảnh có thể bị thu phóng để không bị cắt tại biên
• no-repeat - không lặp lại

Ví dụ: ảnh lặp lại cả chiều x và y thì viết:

background-repeat: repeat repeat;

Ví dụ trên có thể viết ngắn gọn một giá trị

background-repeat: repeat;

Tương tự, có một số trường hợp viết ngắn ngọn bạn chỉ cần viết một giá trị bao gồm:

• repeat lặp lại theo x, y (tương đương repeat repeat)
• repeat-x chỉ lặp theo chiều x (tương đương repeat no-repeat)
• repeat-y chỉ lặp theo chiều y(tương đương no-repeat repeat)
• no-repeat không lặp theo cả chiều x và y (tương đương no-repeat no-repeat)
• round tương đương round round
• space tương đương space space

 <style>
    div.nen2 {
        background-image: url('https://cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png');
        background-repeat: round no-repeat;
        background-color: whitesmoke;

    }
    div.nen2 p {
        color: red;
    }
</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>

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ử (cố định với biên trang), scroll trôi theo phần tử (nền cố định với biên phần tử), local nền cuộn theo content của phần tử.

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://cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.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>