Khóa học CSS - Bài 03 - Định dạng Background

Các thuộc tính background trong CSS gồm:

·         background-color

·         background-image

·         background-repeat

·         background-attachment

·         background-position

1. background-color

Thiết lập màu nền của phần tử HTML.

Ví dụ:

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

2. background-image

Xác định 01 tấm hình sẽ làm nền của đối tượng.

Mặc định tấm hình sẽ được lặp lại cho đến khi nào lấp đầy toàn bộ đối tượng (cả chiều ngang và dọc)

Ví dụ:

Ở đây ta sẽ chọn 01 tấm hình nhỏ để thấy tấm hình được lặp lại lấp đầy nền trang web.

body {
    background-image: url("hinh/linh.jpg");
}

3. background-repeat

a.       Lặp hình nền theo chiều ngang

Ví dụ:

body {
    background-image: url("hinh/linh.jpg");
    background-repeat: repeat-x;
}

b.      Lặp hình nền theo chiều dọc

Ví dụ:

body {
    background-image: url("hinh/linh.jpg");
    background-repeat: repeat-x;
}

c.       Hình nền không lặp lại

Mặc định nếu hình nền không lặp lại sẽ được đặt ở vị trí left-top

Ví dụ:

body {
    background-image: url("hinh/linh.jpg");
    background-repeat: no-repeat;
}

4. background-position

Không lặp lại hình nền và cố định ở 01 góc (trên?)

Ví dụ:

body {
    background-image: url("hinh/linh.jpg");
    background-repeat: no-repeat;
    background-position: right top;
}

5. background-attachment

Cố định hình nền không bị cuộn theo nội dung trang web khi người dùng cuộn lên hoặc cuộn xuống.

Ví dụ:

body {
    background-image: url("hinh/linh.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

6. Viết tắt các thuộc tính background

Ta chỉ dùng mỗi chữ background để mô tả tất cả thuộc tính.

Ví dụ:

body {
    background: #ffffff url("hinh/linh.jpg") no-repeat right top;
}

Các bạn có thể xem thêm video clip sau để hiểu rõ hơn:

Quay về mục lục TỰ HỌC CSS

• Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
• Trang fan page: https://www.facebook.com/lophocvitinhcom
• Trang web: http://lophocvitinh.com

Tác giả: #drM

Nguồn: Sưu Tầm