Ví dụ về thuộc tính background

Thuộc tính background-clip

Thuộc tính background-clip: Xác định vùng background được cắt bớt (clip) như thế nào.

Trước khi xem các giá trị của background-clip, ta hãy xét ví dụ sau:

HTML viết:

<html>
<head></head>
<body>
<div>background-clip background-clip background-clip background-clip background-clip.</div>
</body>
</html>

CSS viết:

div {
    background: #ccc;
    border: 10px dotted #cc0000;
    height: 150px;
    padding: 20px;
    width: 150px;
}

Những giá trị css trên chỉ để dễ hình dung ví dụ, chứ không có ý nghĩa cho background-clip

Hiển thị trình duyệt khi chưa sử dụng background-clip:

background-clip background-clip background-clip background-clip background-clip.

Thuộc tính background-clip với giá trị padding-box

Thuộc tính background-clip với giá trị padding-box: Xác định vùng background được cắt bớt, giới bạn lại bao gồm cả vùng padding (không bao gồm border).

Thêm thuộc tính background-clip với giá trị padding-box vào CSS, ta có:

div {
    background: #ccc;
    background-clip: padding-box;
    border: 10px dotted #cc0000;
    height: 150px;
    padding: 20px;
    width: 150px;
}

Hiển thị trình duyệt khi sử dụng background-clip: padding-box:

background-clip background-clip background-clip background-clip background-clip.

Thuộc tính background-clip với giá trị border-box

Thuộc tính background-clip với giá trị border-box: Xác định vùng background được cắt bớt, giới hạn lại bao gồm cả border.

Thêm thuộc tính background-clip với giá trị border-box vào CSS, ta có:

div {
    background: #ccc;
    background-clip: border-box;
    border: 10px dotted #cc0000;
    height: 150px;
    padding: 20px;
    width: 150px;
}

Hiển thị trình duyệt khi sử dụng background-clip: border-box:

background-clip background-clip background-clip background-clip background-clip.

Thuộc tính background-clip với giá trị content-box

Thuộc tính background-clip với giá trị content-box: Xác định vùng background được cắt bớt, giới hạn lại theo vùng chứa nội dung.

Thêm thuộc tính background-clip với giá trị content-box vào CSS, ta có:

div {
    background: #ccc;
    background-clip: content-box;
    border: 10px dotted #cc0000;
    height: 150px;
    padding: 20px;
    width: 150px;
}

Hiển thị trình duyệt khi sử dụng background-clip: content-box:

background-clip background-clip background-clip background-clip background-clip.

Thuộc tính background-origin

Thuộc tính background-origin: Xác định giá trị tương đối của background theo vùng giới hạn.

Trước khi xem các giá trị của background-origin, ta hãy xét ví dụ sau:

HTML viết

<html>
<head></head>
<body>
<div>background-origin background-origin background-origin background-origin background-origin.</div>
</body>
</html>

CSS viết:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    border: 10px dotted #cc0000;
    height: 150px;
    padding: 20px;
    width: 150px;
}

Những giá trị css trên chỉ để dễ hình dung ví dụ, chứ không có ý nghĩa cho background-origin

Hiển thị trình duyệt khi chưa sử dụng background-origin:

background-origin background-origin background-origin background-origin background-origin.

Thuộc tính background-origin với giá trị padding-box

Thuộc tính background-origin với giá trị padding-box: Xác định giá trị tương đối của background giới hạn theo vùng chứa padding.

Thêm thuộc tính background-origin với giá trị padding-box vào CSS, ta có:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    background-origin: padding-box;
    border: 10px dotted #cc0000;
    height: 150px;
    padding: 20px;
    width: 150px;
}

Hiển thị trình duyệt khi sử dụng background-origin: padding-box:

background-origin background-origin background-origin background-origin background-origin.

Thuộc tính background-origin với giá trị border-box

Thuộc tính background-origin với giá trị border-box: Xác định giá trị tương đối của background giới hạn theo vùng chứa border.

Thêm thuộc tính background-origin với giá trị border-box vào CSS, ta có:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    background-origin: border-box;
    border: 10px dotted #cc0000;
    height: 150px;
    padding: 20px;
    width: 150px;
}

Hiển thị trình duyệt khi sử dụng background-origin: border-box:

background-origin background-origin background-origin background-origin background-origin.

Thuộc tính background-origin với giá trị content-box

Thuộc tính background-origin với giá trị content-box: Xác định giá trị tương đối của background giới hạn theo vùng chứa nội dung.

Thêm thuộc tính background-origin với giá trị content-box vào CSS, ta có:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    background-origin: content-box;
    border: 10px dotted #cc0000;
    height: 150px;
    padding: 20px;
    width: 150px;
}

Hiển thị trình duyệt khi sử dụng background-origin: content-box:

background-origin background-origin background-origin background-origin background-origin.

Thuộc tính background-size

Thuộc tính background-size: Xác định kích cỡ cho background.

Trước khi xem các giá trị của background-size, ta hãy xét ví dụ sau:

HTML viết

<html>
<head></head>
<body>
<div>background-size background-size background-size background-size background-size.</div>
</body>
</html>

CSS viết:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    border: 1px solid #009;
    height: 300px;
    width: 500px;
}

Những giá trị css trên chỉ để dễ hình dung ví dụ, chứ không có ý nghĩa cho background-size

Hiển thị trình duyệt khi chưa sử dụng background-size:

background-size background-size background-size background-size background-size.

Thuộc tính background-size với giá trị 1 thành phần

Thuộc tính background-size với giá trị 1 thành phần: Xác định giá trị của chiều cao, chiều rộng sẽ tự động chỉnh theo (auto).

Thêm thuộc tính background-size với giá trị theo chiều cụ thể vào CSS, ta có:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    background-size: 200px;
    border: 1px solid #009;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt khi sử dụng background-size: 200px:

background-size background-size background-size background-size background-size.

Thuộc tính background-size với giá trị 2 thành phần

Thuộc tính background-size với giá trị 2 thành phần: Thiết lập chiều chiều cao (height) và rộng (width) cho vùng background theo đơn vị.

Thêm thuộc tính background-size với giá trị theo 2 thành phần vào CSS, ta có:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    background-size: 200px 250px;
    border: 1px solid #009;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt khi sử dụng background-size: 200px 250px:

background-size background-size background-size background-size background-size.

Thuộc tính background-size với giá trị phần trăm (%) - 1 thành phần

Thuộc tính background-size với giá trị phần trăm (%) - 1 thành phần: Xác định giá trị của chiều rộng theo % nội dung chứa, chiều cao sẽ tự động chỉnh theo tỷ lệ.

Thêm thuộc tính background-size với giá trị phần trăm (%) - 1 thành phần vào CSS, ta có:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    background-size: 50%;
    border: 1px solid #009;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt khi sử dụng background-size: 50%:

background-size background-size background-size background-size background-size.

Xét thêm ví dụ về thuộc tính background-size với giá trị phần trăm (%) - 1 thành phần:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    background-size: 100%;
    border: 1px solid #009;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt khi sử dụng background-size: 100%:

background-size background-size background-size background-size background-size.

Thuộc tính background-size với giá trị phần trăm (%) - 2 thành phần

Thuộc tính background-size với giá trị phần trăm (%) - 2 thành phần: Xác định giá trị của chiều cao và chiều rộng theo phần trăm nội dung chứa.

Thêm thuộc tính background-size với giá trị phần trăm (%) - 2 thành phần vào CSS, ta có:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    background-size: 50% 100%;
    border: 1px solid #009;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt khi sử dụng background-size: 50% 100%:

background-size background-size background-size background-size background-size.

Thuộc tính background-size với giá trị cover

Thuộc tính background-size với giá trị cover: Tự chia tỷ lệ tới kích thước lớn nhất của chiều rộng hoặc chiều cao để phù hợp với vùng nội dung.

Nếu chiều cao lớn hơn chiều rộng thì background sẽ chỉnh 100% theo chiều cao, chiều rộng sẽ tự động chỉnh tỷ lệ cho phù hợp (auto).
Ngược lại nếu chiều rộng lớn hơn chiều cao thì background sẽ chỉnh 100% theo chiều rộng, chiều cao sẽ tự động chỉnh tỷ lệ cho phù hợp (auto).

Thêm thuộc tính background-size với giá trị cover vào CSS, ta có:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    background-size: cover;
    border: 1px solid #009;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt khi sử dụng background-size: cover:

background-size background-size background-size background-size background-size.

Thuộc tính background-size với giá trị contain

Thuộc tính background-size với giá trị contain: Tự chia tỷ lệ tới kích thước lớn nhất của chiều rộng hoặc chiều cao để phù hợp với vùng nội dung.

Nếu chiều cao nhỏ hơn chiều rộng thì background sẽ chỉnh 100% theo chiều cao, chiều rộng sẽ tự động chỉnh tỷ lệ cho phù hợp (auto).
Ngược lại nếu chiều rộng nhỏ hơn chiều cao thì background sẽ chỉnh 100% theo chiều rộng, chiều cao sẽ tự động chỉnh tỷ lệ cho phù hợp (auto).

Thêm thuộc tính background-size với giá trị cover vào CSS, ta có:

div {
    background: url(images/bg_webstd.gif) no-repeat;
    background-size: contain;
    border: 1px solid #009;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt khi sử dụng background-size: contain:

background-size background-size background-size background-size background-size.