[W3schools Tiếng Việt] – CSS Backgrounds

Background Color – Mầu nền

Thuộc tính background-color chỉ định màu nền của phần tử.

Màu nền của một trang được đặt như sau:

body {
    background-color: lightblue;
}

See the Pen background by nguyen tien (@nguyentien365) on CodePen.

Với CSS, màu sắc thường được chỉ định bởi:

• Tên màu/giá trị HEX/giá trị RGB hợp lệ – như “red”, “#ff0000” hoặc “rgb(255,0,0)”.

Xem các giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể có.

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;
}

See the Pen backgroun color by nguyen tien (@nguyentien365) on CodePen.

---

Background Image – Hình nền

Thuộc tính hình nền background-image chỉ định hình ảnh để sử dụng làm nền của phần tử.

Theo mặc định, hình ảnh được lặp lại để nó bao gồm 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");
}

url(“paper.gif”): link hình bạn muốn đặt;

Lưu ý: Khi sử dụng hình nền, hãy sử dụng hình ảnh có mầu sắc tương phản với mầu chữ.

---

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

(Repeat Horizontally or Vertically)

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

*Mẹo:

Để lặp lại hình ảnh theo chiều dọc, ta sử dụng: background-repeat: repeat-y;

Để lặp lại hình ảnh theo chiều dọc, ta sử dụng: background-repeat: repeat-x;

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

---

Hình nền – đặt cố định không lặp lại

(Set position and no-repeat)

Chỉ hiển thị hình nền một lần không lặp lại, ta sử dụng: background-repeat no-repeat;

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

 

Xem ví dụ

Trong ví dụ trên, hình nền được hiển thị ở cùng một nơi với văn bản. Nếu bạn muốn thay đổi vị trí của hình ảnh, để nó không làm ảnh hưởng tới văn bản quá nhiều, bạn sử dụng background-position

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

Giá trị của  background-position  bạn có thể set nhiều vị trí khác nhau: center, right, left, …..

Xem ví dụ

---

Background Image – Fixed position

Thuộc tính này sẽ đặt cố định hình ảnh nền và sẽ không cuộ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;
}

See the Pen The background-image is fixed. by nguyen tien (@nguyentien365) on CodePen.

---

Background – Shorthand property

Để rút ngắn mã, 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à một Shorthand property – Tốc ký.

Hiểu đơn giản là ta nhóm chúng lại và mỗi thuộc tính cách nhau bởi khoảng trắng, vậy thôi :))

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

Khi sử dụng thuộc tính Shorthand property (tốc ký), thứ tự của các giá trị thuộc tính là:

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

Thuộc tính trong sử dụng tốc ký có thể thiếu, nhưng phải đảm bảo đúng thứ tự.

---

Tất cả thuộc tính của Background trong CSS

Thuộc tính	Mô tả
background	Đặt tất cả các thuộc tính nền trong một khai báo
background-attachment	Đặt xem hình nền có cố định hay cuộn với phần còn lại của trang
background-clip	Chỉ định vùng vẽ của nền
background-color	Đặt mầu nền cho một vùng chọn
background-image	Đặt ảnh nền cho một vùng chọn
background-origin	Chỉ định vị trí của (các) hình nền
background-position	Đặt vị trí bắt đầu của ảnh nền
background-repeat	Điều chỉnh dạng hiển thị của hình nền (lặp lại hoặc không, các chiều lặp)
background-size	Chỉ định kích thước của hình nền