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

Thuộc tính background-attachment

Thuộc tính background-attachment : xác định thành phần nền được cố định hoặc cuộn so với trang.
Được sử dụng kèm với giá trị background-image

Với url là đường dẫn tới hình được sử dụng làm hình nền.

<html>
<head>
<style type="text/css">
div {
    background: url(bg_webstd.gif) no-repeat;
    background-attachment: fixed;
}
</style>
</head>

<body>
<div>
<p>background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br /></p>
</div>
</body>
</html>

Click xem demo

Thuộc tính background-color

Thuộc tính background-color : xác định màu nền cho thành phần.

<html>
<head>
<style type="text/css">
div {
    background-color: #ff0000;
}
</style>
</head>

<body>
<div>
<p>background-color<br />
background-color<br />
background-color<br />
background-color<br /></p>
</div>
</body>
</html>

background-color
background-color
background-color
background-color

Thuộc tính background-image

Thuộc tính background-image : xác định hình ảnh nền cho thành phần.

Với url là đường dẫn tới hình được sử dụng làm hình nền.

<html>
<head>
<style type="text/css">
div {
    background-image: url(bg_webstd.gif);
}
</style>
</head>

<body>
<div>
<p>background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br /></p>
</div>
</body>
</html>

background-image
background-image
background-image
background-image
background-image
background-image

Thuộc tính background-position

Thuộc tính background-position : xác định vị trí hình ảnh nền cho thành phần.
Được sử dụng kèm với giá trị background-image và background-repeat.

<html>
<head>
<style type="text/css">
div {
    background-image: url(bg_webstd.gif);
    background-repeat: no-repeat;
    background-position: right top;
}
</style>
</head>

<body>
<div>
<p>background-position<br />
background-position<br />
background-position<br />
background-position<br />
background-position<br />
background-position<br /></p>
</div>
</body>
</html>

background-position
background-position
background-position
background-position
background-position
background-position

background-position có các cặp giá trị như sau:

background-position: left top; Hình nằm bên trái - phía trên thành phần (đây là dạng mặc định).
background-position: left bottom; Hình nằm bên trái - phía dưới thành phần
background-position: left center; Hình nằm bên trái - canh giữa thành phần

background-position: right top; Hình nằm bên phải - phía trên thành phần (đây là dạng mặc định).
background-position: right bottom; Hình nằm bên phải - phía dưới thành phần
background-position: right center; Hình nằm bên phải - canh giữa thành phần

background-position: center top; Hình nằm giữa - phía trên thành phần (đây là dạng mặc định).
background-position: center bottom; Hình nằm giữa - phía dưới thành phần
background-position: center center; Hình nằm giữa - canh giữa thành phần

background-position: đơnvị đơnvị; Hình nằm cách bên trái với khoảng cách bằng đơn vị - cách phía trên với khoảng cách bằng đơn vị.
Ví dụ: background-position: 5px 15px;

<html>
<head>
<style type="text/css">
p {
    background-image: url(ico_arrow.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px;
    padding-left: 10px;
}
</style>
</head>

<body>
<p>background-position</p>
</body>
</html>

background-position

Thuộc tính background-repeat

Thuộc tính background-repeat : xác định hình ảnh nền được lặp như thế nào.
Được sử dụng kèm với giá trị background-image.

background-repeat: repeat-x;

<html>
<head>
<style type="text/css">
div {
    background-image: url(bg_webstd.gif);
    background-repeat: repeat-x;
}
</style>
</head>

<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>

background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat

background-repeat: repeat-y;

<html>
<head>
<style type="text/css">
div {
    background-image: url(bg_webstd.gif);
    background-repeat: repeat-y;
}
</style>
</head>

<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>

background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat

background-repeat: repeat;

<html>
<head>
<style type="text/css">
div {
    background-image: url(bg_webstd.gif);
    background-repeat: repeat;
}
</style>
</head>

<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>

background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat

background-repeat: no-repeat;

<html>
<head>
<style type="text/css">
div {
    background-image: url(bg_webstd.gif);
    background-repeat: no-repeat;
}
</style>
</head>

<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>

background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat
background-repeat

Thuộc tính background

Thuộc tính background : Có giá trị riêng lẻ hoặc tổng hợp các thuộc tính background-color, background-image, background-repeat, background-position, background-attachment.

Cách viết như sau:
background: color image repeat position attachment;
Ví dụ: background: #990000 url(bg_webstd.gif) no-repeat left top fixed;

<html>
<head>
<style type="text/css">
div {
    background: #990000 url(bg_webstd.gif) no-repeat left top;
}
</style>
</head>

<body>
<div>
<p>background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br /></p>
</div>
</body>
</html>

background-image
background-image
background-image
background-image
background-image
background-image