Thuộc tính nền CSS được sử dụng để thêm hiệu ứng nền cho các phần tử.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)

CSS background-color

Thuộc tính màu nền xác định màu nền của phần tử.

body {
  background-color: lightblue;
}

Opacity / Transparency

Thuộc tính opacity chỉ định độ mờ/độ trong suốt của một phần tử. Nó có thể nhận giá trị từ 0,0 – 1,0. Giá trị càng thấp thì càng minh bạch:

<div class="w3-cell-row">
<div class="w3-cell w3-mobile w3-center">
<div style="background-color:#04AA6D;opacity:1;padding:50px;color:black"><p>opacity 1</p></div>
</div>

<div class="w3-cell w3-mobile w3-center">
<div style="background-color:#04AA6D;opacity:0.6;padding:50px;color:black"><p>opacity 0.6</p></div>
</div>

<div class="w3-cell w3-mobile w3-center">
<div style="background-color:#04AA6D;opacity:0.3;padding:50px;color:black"><p>opacity 0.3</p></div>
</div>

<div class="w3-cell w3-mobile w3-center">
<div style="background-color:#04AA6D;opacity:0.1;padding:50px;color:black"><p>opacity 0.1</p></div>
</div>

</div>

div {
  background-color: green;
  opacity: 0.3;
}

CSS Background Image

Thuộc tính hình nền chỉ định một hình ảnh được 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 phủ toàn bộ phần tử.

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

CSS background-repeat

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

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

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

CSS background-position

Thuộc tính vị trí nền được sử dụng để chỉ định vị trí của hình nền.

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