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

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>

Để 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, y
• repeat-x lặp theo chiều x
• repeat-y lặp theo chiều y
• no-repeat không lặp
• inherit 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>

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>