1. CSS thiết lập màu nền

Thẻ mà ta có thể thiết lập background toàn trang là thẻ body nên ta chỉ cần gán CSS cho thẻ body là được.

body{
    background: red;
}

hoặc:

body{
    background: #fb0320;
}

hoặc:

body{
    background-color: #fb0320;
}

2. CSS thiết lập hình nền

Thiết lập hình nền thì ta sử dụng thuộc tính CSS background hoặc background-image với tham số truyền vào là URL của hình ảnh.

body{
    background: url('./hoc-lap-trinh-online.png');
}

hoặc:

body{
    background-image: url('./hoc-lap-trinh-online.png');
}

3. Tùy chọn hiển thị background

Ví dụ bên dưới tạo background không lặp:

body{
    background-image: url('./hoc-lap-trinh-online.png');
    background-repeat: no-repeat;
}

Ta sẽ sử dụng thuộc tính background-repeat và thuộc tính này gồm các giá trị:

no-repeat : không lặp
repeat: cho phép lặp
repeat-x : lặp theo chiều ngang
repeat-y : lặp theo chiều dọc

Ta có thể thay no-repeat thành repeat, repear-x hoặc repeat-y. Ngoài cách viết trên ta có thể gom thành:

body{
    background: url('./hoc-lap-trinh-online.png') no-repeat;
}

4. Thiết lập vị trí hiển thị

Trường hợp bạn sử dụng background không lặp và bạn muốn background hiển thị ở một ví trí nào đó như center, left, right, … thì bạn sử dụng thuộc tính background-position. Cấu trúc của nó là:

background-position: position1 position2;

Trong đó position1 và position2 gồm các giá trị sau:

bottom: ở dưới
left: bên trái
right: bên phải
center: ở giữa
top: ở trên

Lưu ý: khi các bạn chọn giá trị thì phải chọn đúng chuẩn như: left bottom, left top, right top, .. chứ không thể chọn left right được vì nó không tuân theo hệ tọa độ.

Ví dụ: Hiển thị background ở giữa

body
{
    height: 300px;
    background-image: url('./hoc-lap-trinh-online.png');
    background-repeat: no-repeat;
    background-position: center;
}

Ví dụ: Hiển thị background góc trái dưới

body
{
    height: 300px;
    background-image: url('./hoc-lap-trinh-online.png');
    background-repeat: no-repeat;
    background-position: left bottom;
}

Ngoài ra bạn cũng có thể gom gọn lại thành:

body
{
    background-image: url('./hoc-lap-trinh-online.png') no-repeat;
    background-position: left bottom;
}

Mở rộng: Nếu bạn muốn background đứng im khi scroll chuột, thêm vào sau thuộc tính fixed.

body
{
    background-image: url('./hoc-lap-trinh-online.png') no-repeat fixed;
    background-position: left bottom;
}