Trong bài này chúng ta sẽ tìm hiểu một số thuốc tính backgrounds sau:

1. background
2. background-color
3. background-image
4. background-repeat
5. background-attachment
6. background-position

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