18/08/2018, 10:45

Các thuộc tính định dạng BACKGROUND trong CSS

Thuộc tính background dùng để định dạng nền cho phần tử HTML. Dưới đây là một số thuộc tính background: background-color (thiết lập màu nền) background-image (thiết lập hình nền) background-repeat (thiết lập sự lặp lại của hình nền) background-attachment (thiết lập vị trí cố định ...

Thuộc tính background dùng để định dạng nền cho phần tử HTML.

Dưới đây là một số thuộc tính background:

  • background-color (thiết lập màu nền)
  • background-image (thiết lập hình nền)
  • background-repeat (thiết lập sự lặp lại của hình nền)
  • background-attachment (thiết lập vị trí cố định cho hình nền)
  • background-position (thiết lập vị trí của hình nền)

    Thiết lập màu nền

    Thuộc tính background-color dùng để thiết lập màu nền cho phần tử.

    Cú pháp
    background-color: màu sắc;

    Trong đó, "màu sắc" có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX

    (Nếu chưa rõ cách xác định màu, bạn có thể xem lại bài Màu sắc trong CSS)

    Ví dụ
    body {
        background-color: rgb(26, 117, 115);
    }
    Xem ví dụ

    Thiết lập hình nền

    Thuộc tính background-image dùng để thiết lập hình nền cho phần tử.

    Cú pháp
    background-image: url("đường dẫn đến tập tin hình ảnh");

    Trong đó, "đường dẫn đến tập tin hình ảnh" có thể là đường dẫn tương đối hoặc tuyệt đối

    (Nếu chưa rõ cách xác định đường dẫn, bạn có thể xem lại bài Liên kết, đường dẫn trong HTML)

    Ví dụ
    body {
        background-image: url('../public/home/img_demo/natural-pic1.jpg');
    }
    
    Xem ví dụ

    Thiết lập sự lặp lại của hình nền

    Thông thường, nếu kích thước của hình nền nhỏ hơn so với kích thước của phần tử thì hình nền sẽ tự động được lặp lại để lấp đầy phần tử.

    Thuộc tính background-repeat dùng để thiết lập sự lặp lại của hình nền.

    Cú pháp
    background-repeat: repeat|no-repeat|repeat-x|repeat-y;

    Trong đó, giá trị:

    • repeat: là giá trị mặc định, hình nền lặp lại theo chiều ngang lẫn chiều dọc
    • no-repeat: không lặp lại
    • repeat-x: chỉ lặp lại theo chiều ngang
    • repeat-y: chỉ lặp lại theo chiều dọc
    Ví dụ 1

    Trường hợp mặc định, tự lặp lại theo chiều ngang và dọc

    body {
        background-image:  url('../public/home/img_demo/natural-pic2.jpg');
    }
    Xem ví dụ
    Ví dụ 2

    Không lặp lại

    body {
        background-image:  url('../public/home/img_demo/natural-pic2.jpg');
        background-repeat: no-repeat;
    }
    Xem ví dụ
    Ví dụ 3

    Chỉ lặp lại theo chiều ngang

    body {
        background-image:  url('../public/home/img_demo/natural-pic2.jpg');
        background-repeat: repeat-x;
    }
    Xem ví dụ
    Ví dụ 4

    Chỉ lặp lại theo chiều dọc

    body {
        background-image:  url('../public/home/img_demo/natural-pic2.jpg');
        background-repeat: repeat-y;
    }
    Xem ví dụ

    Thiết lập vị trí của hình nền

    Thuộc tính background-position dùng để thiết lập vị trí của hình nền.

    Cú pháp
    background-position: vị trí;

    Lưu ý: Nếu muốn thiết lập vị trí cho hình nền thì thuộc tính background-repeat phải nhận giá trị no-repeat

    Ví dụ
    body{
        background-image:  url('../public/home/img_demo/face1.jpg');
        background-repeat: no-repeat;
        background-position: right top;
    }
    Xem ví dụ

    (Bạn có thể tìm hiểu cách xác định vị trí cho hình nền tại đây)

    Thiết lập vị trí cố định cho hình nên

    Vị trí cố định tức là khi ta kéo chuột lên xuống hoặc qua trái phải thì hình nên vẫn đứng yên một chỗ.

    Để thiết lập vị trí cố định cho hình nền ta sử dụng thuộc tính background-attachment với giá trị fixed

    Ví dụ
    body{
        background-image:  url('../public/home/img_demo/face1.jpg');
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: fixed;
    }
    Xem ví dụ

    Cú pháp định dạng background rút gọn

    Chúng ta có thể định dạng cho background bởi 5 thuộc tính color, image, repeat, attachment, position chỉ với một câu lệnh duy nhất

    Cú pháp
    background: parameter1 parameter2 parameter3 parameter4 parameter5;

    Trong đó:

    • parameter1 là giá trị của thuộc tính background-color
    • parameter2 là giá trị của thuộc tính background-image
    • parameter3 là giá trị của thuộc tính background-repeat
    • parameter4 là giá trị của thuộc tính background-attachment
    • parameter5 là giá trị của thuộc tính background-position
    Ví dụ
    background: red url('../public/home/img_demo/smileface.png') no-repeat fixed right top;
    Xem ví dụ

    Lưu ý: Không nhất thiết phải đủ 5 tham số. Tuy nhiên, các tham số phải được sắp xếp theo đúng thứ tự như trên.

    0