Thuộc tính Background trong CSS

Các thuộc tính background trong CSS được sử dụng để xác định các hiệu ứng nền cho các phần tử. Thuộc tính background của CSS:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Màu nền

Thuộc tính background-color xác định màu nền của một phần tử. Màu nền của một trang được đặt như sau:

body {
    background-color: lightblue;
}

Trong CSS, một màu thường được chỉ định bởi:

• tên màu hợp lệ – như “red”
• giá trị HEX – như “#ff0000”
• một giá trị RGB như “rgb(255,0,0)”

Trong ví dụ bên dưới, các phần tử <h1>, <p> và <div> có các màu nền khác nhau:

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

Ảnh nền

Thuộc tính background-image chỉ định một hình ảnh để sử dụng làm nền của một phần tử. Theo mặc định, hình ảnh được lặp lại để bao chọn toàn bộ phần tử.

Hình nền cho một trang có thể được đặt như sau:

body {
    background-image: url("paper.gif");
}

Dưới đây là ví dụ về sự kết hợp không hợp lý của văn bản và hình nền. Văn bản khó đọc được:

body {
    background-image: url("bgdesert.jpg");
}

Lưu ý: khi sử dụng hình nền, hãy sử dụng một hình ảnh không chèn lên văn bản.

Hình nền – lặp lại theo chiều ngang hoặc chiều dọc

Theo mặc định, thuộc tính hình ảnh nền lặp lại hình ảnh theo chiều ngang và chiều dọc. Một số hình ảnh nên được lặp lại theo chiều ngang hoặc chiều dọc, hoặc chúng không theo nguyên tắc, như sau:

body {
    background-image: url("gradient_bg.png");
}

Nếu hình ảnh ở trên chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;), nền sẽ trông đẹp hơn:

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

Mẹo: để lặp lại một hình ảnh theo chiều dọc, thiết lập lặp lại nền: repeat-y;

Hình nền – Đặt vị trí và không lặp lại

Chỉ hiển thị hình nền chỉ một lần cũng được xác định bởi thuộc tính lặp lại nền:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

Trong ví dụ ở trên, hình nền được hiển thị ở cùng vị trí với văn bản. Giả sử muốn thay đổi vị trí của hình ảnh, để không trùng với đoạn văn bản gây khó nhìn cho người dùng.

Vị trí của hình ảnh được xác định bởi thuộc tính vị trí nền:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Hình nền – Vị trí cố định

Để xác định rằng ảnh nền nên được cố định (sẽ không di chuyển với phần còn lại của trang), hãy sử dụng thuộc tính đính kèm dưới nền:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

Hình nền – viết tắt thuộc tính

Để rút ngắn mã, bạn cũng có thể chỉ định tất cả các thuộc tính nền trong một thuộc tính duy nhất. Đây được gọi là thuộc tính viết tắt.

Thuộc tính viết tắt cho nền là nền:

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Khi sử dụng thuộc tính viết tắt, thứ tự của các giá trị thuộc tính là:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Nếu một trong các giá trị thuộc tính bị thiếu cũng không quan trọng, miễn là những giá trị khác nằm trong thứ tự này.

Tất cả thuộc tính nền của CSS