CSS Backgrounds - CSS nền

[PCO]

Các thuộc tính background CSS được sử dụng để xác định hiệu ứng nền cho các yếu tố.

Các thuộc tính của CSS background:

• background-color: Xác định màu nền cho thành phần.
• background-image: Xác định hình ảnh nền cho thành phần.
• background-repeat: Xác định hình ảnh nền được lặp như thế nào.
• background-attachment: Xác định thành phần nền được cố định hoặc cuộn so với trang.
  Được sử dụng kèm với giá trị background-image
• background-position: Xác định vị trí hình ảnh nền cho thành phần.
  Được sử dụng kèm với giá trị background-image

Background Color

Các 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 thiết lập như thế này:

body {
background-color: lightblue;
}

Với CSS, một màu sắc thường được xác định bởi:

• Một tên màu hợp lệ: "red"
• Một giá trị HEX: "#ff0000"
• Một giá trị RGB: "rgb(255,0,0)"

Nhìn vào giá trị CSS Color sẽ cho một danh sách đầy đủ các giá trị màu sắc

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

h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p {
background-color: yellow;
}

Background Image

Các thuộc tính background-image định cụ thể một hình ảnh để sử dụng như là nền tảng của một phần tử.

Theo mặc định, hình ảnh được lặp đi lặp lại như vậy nó bao gồm toàn bộ phần tử.

Hình nền cho một trang có thể được thiết lập như thế này:

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

Dưới đây là một sự kết hợp không tốt của văn bản và hình nền. Văn bản trở nên khó đọc:

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

Chú ý: Khi sử dụng một hình nền, nên sử dụng một hình ảnh không làm cho văn bản trở nên khó đọc. Nên lựa chọn hình ảnh nào làm cho văn bản trở nên nổi bật.
Background Image - Lặp lại theo chiều ngang hoặc lặp lại theo chiều dọc

Theo mặc định, các thuộc tính background-image lặp đi lặp lại một hình ảnh cả hai chiều ngang và chiều dọc.

Một số hình ảnh phải được lặp đi lặp lại chỉ theo chiều ngang hoặc theo chiều dọc, hoặc nó trông sẽ rất lạ, như thế này:

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

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

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

Note: Để lặp lại một hình ảnh thiết lập theo chiều dọc ta dùng: background-repeat: repeat-y;
Background Image - Thiết lập vị trí và không lặp lại

Hiển thị hình nền chỉ một lần cũng được quy định bởi các thuộc tính background-repeat:

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

Trong ví dụ trên, các hình nền được thể hiện trong cùng một vị trí như các văn bản. Chúng ta muốn thay đổi vị trí của hình ảnh, để nó không làm ảnh hưởng đến các văn bản quá nhiều.

Vị trí của hình ảnh được xác định bởi thuộc tính background-position:

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

Background Image - Vị trí cố định
Để xác định các hình nền cần được cố định (sẽ không di chuyển với phần còn lại của trang), sử dụng thuộc tính background-attachment:

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

Background - Thuộc tính Shorthand

Để rút ngắn mã, nó cũng có thể xác định tất cả các tính chất nền trong một thuộc tính duy nhất. Điều này được gọi là một shorthand property.

Shorthand property cho nền là background:

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

Khi dùng shorthand property theo thứ tự của các thuộc tính là:

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

Nó không quan trọng nếu một trong các giá trị thuộc tính bị mất tích, miễn là những người khác theo thứ tự này.

Nguồn: w3schools.com​