Nền trong CSS

Đặc tính nền trong CSS được dùng để định nghĩa hiệu ứng nền cho các phần tử. Các đặc tính của nền trong CSS gồm:

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

Màu nền

Đặc tính backgroud-color xác định màu nền cho phần tử.

body {
 background-color: lightblue;
}

Màu sắc trong CSS thường được xác định bằng

• tên màu, như “red”...
• giá trị màu HEX, như #ff0000…
• giá trị RGB, như rgb(255,0,0)...

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

h1 {
 background-color: green;
}

div {
 background-color: lightblue;
}

p {
 background-color: yellow;
}

Ảnh nền

Đặc tính background-image lấy hình ảnh làm nền cho phần tử. Mặc định ảnh sẽ được sao chép lặp lại để bao phủ toàn bộ phần tử.

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

Lưu ý là khi dùng ảnh làm nền, đừng để nó chèn lên hay làm cho chữ khó đọc.

Ảnh nền lặp đi lặp lại theo chiều dọc và ngang

Mặc định đặc tính background-image sẽ lặp đi lặp lại theo cả chiều ngang và chiều dọc để bao phủ toàn bộ phần tử. Một số ảnh chỉ nên lặp theo 1 chiều, nếu không trông sẽ rất xấu. Khi đó hãy dùng thêm đặc tính background-repeat: repeat-x; để lặp theo chiều ngang và background-repeat: repeat-y; để lặp theo chiều dọc.

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

Ảnh nền, đặt vị trí và không lặp lại

Để lấy một ảnh làm nền và không muốn lặp lại thì dùng đặc tính background-repeat.

body {
 background-image: url("img_trejpg");
 background-repeat: no-repeat;
}

Hình ảnh xuất hiện một lần trên trang

Ở ví dụ trên ảnh chỉ xuất hiện một lần và sẽ hiển thị ở cùng chỗ với văn bản. Vậy ta nên đổi vị trí ảnh bằng đặc tính background-position.

body {
 background-image: url("img_tree.jpg");
 background-repeat: no-repeat;
 background-position: right top;
 margin-right: 200px;
}

Ảnh không còn chèn vào chữ khi đổi vị trí

Ảnh nền, cố định vị trí

Để chỉ định ảnh nền cố định (không bị cuộn theo cả trang), dùng đặc tính background-attachment.

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

Khi cuộn trang, ảnh vẫn ở nguyên vị trí ban đầu

Ảnh nền, đặc tính rút gọn

Để rút ngắn code, bạn có thể chỉ định tất cả các đặc tính cho nền trong một đặc tính duy nhất, đây gọi là đặc tính rút gọn. Đặc tính rút gọn của nền là background.

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

Khi dùng đặc tính rút gọn, thứ tự các giá trị sẽ là

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

Chỉ cần viết theo đúng thứ tự, không nhất thiết phải đầy đủ các đặc tính.

Bài trước: Màu sắc trong CSS

Bài sau: Đường viền trong CSS