Ngôn ngữ CSS - CSS Background
Thuộc tính background của CSS
Thuộc tính background được dùng để định dạng nền cho thành phần.
Các dạng thuộc tính background:
- background-color: xác định màu cho nền.
- background-image: xác định hình cho nền.
- background-position: xác định vị trí cho nền, thường được sử dụng kèm với background-image.
- background-repeat: xác định hình nền được lặp lại như thế nào.
- 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 background-image.
- background: dạng tổng quát, kết hợp của các loại background trên.
1. Màu nền (thuộc tính background-color)
Thuộc tính background-color để định màu nền cho một thành phần trên trang web. Các giá trị mã màu cũng giống như thuộc tính color, tuy nhiên có thêm giá trị transparent để tạo nền trong suốt.
Ví dụ sử dụng thuộc tính background-color để định màu nền trang, các thành phần h1, h2 lần lượt là xanh lơ, đỏ và cam.
<html>
<head>
<style type="text/css">
body { background-color:cyan }
h1 { background-color:red }
h2 { background-color:orange}
</style>
</head>
<body>
<h1>Welcome to my hiepsiit</h1>
<h2>Học CSS rất nhức đầu.</h2>
</body>
</html>
Xem ví dụ
2. Ảnh nền (thuộc tính background-image)
Để chèn ảnh nền vào một thành phần trên trang web, ta sử dụng thuộc tính background-image. Cách làm này sẽ làm cho trang web của bạn thêm phần sinh động.
<html>
<head>
<style>
body{
background-image:url(images/bg.jpg);
}
h1{
background-color: red;
}
h2 {
background-color: orange;
}
</style>
</head>
<body>
<h1>Đây là CSS đầu tiên</h1>
<h2>Học CSS rất nhức đầu.</h2>
</body>
</html>
3. Lặp lại ảnh nền ( thuộc tính background-repeat )
Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa. Thuộc tính background-repeat cho ta 4 giá trị để kiểm soát độ lặp của ảnh nền.
Gồm:
+ repeat-x: Chỉ lặp lại theo phương ngang
+ repeat-y: Chỉ lặp lại theo phương dọc
+ repeat: Lặp lại theo cả hai phương, đây là giá trị mặc định
+ no-repeat: Không lặp lại ảnh.
Ví dụ: Trang web sau có hình nền lặp theo phương dọc, dùng thuộc tính background-repeat:repeat-y
<html>
<head>
<style>
body{
background-image:url(images/hiepsiit.png);background-repeat:repeat-y;
}
h1{
background-color: red;
}
h2 {
background-color: orange;
}
</style>
</head>
<body>
<h1>Đây là CSS đầu tiên</h1>
<h2>Học CSS rất nhức đầu.</h2>
</body>
</html>
4. Khóa ảnh nền (thuộc tính background-attachment)
Background-attachment là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:
+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
+ fixed: Cố định ảnh nền so với nội dung trang web, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web (mờ bất động).
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background-image:url(images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
margin-left: 200px;
}
</style>
</head>
<body>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>If you do not see any scrollbars, Resize the browser window.</p>
</body>
</html>
5. Định vị ảnh nền (thuộc tính background-position)
Mặc định, ảnh nền sẽ đc đặt tại góc trên phía bên trái màn hình. Tuy nhiên với thuộc tính background-position ta có thể đưa ảnh ở bất cứ vị trí nào trong không gian của thành phần mà nó làm nền.
Nó sẽ sử dụng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có thể sử dụng đơn vị chính xác như centimeters, pixels, inches hay các đơn vị quy đổi như % hoặc các vị trí đặc biệt như top, bottom, left, right.
Ví dụ: Định vị trí ảnh nền
background-position: 5cm 2cm ( có nghĩa là ảnh sẽ được định vị 5 cem từ trái qua và 2 cm từ trên xuống )
background-position: 20% 30% ( có nghĩa là ảnh được định vị 20% từ trái qua và 30% từ trên xuống)
background-position: bottom left ( có nghĩa là ảnh được định vị ở góc trái phía dưới )
Ví dụ 2: Định vị trí ảnh nền
<html>
<head>
<style>
body {
background-image:url(images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
background-color:transparent;
}
</style>
</head>
<body>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>If you do not see any scrollbars, Resize the browser window.</p>
</body>
</html>
6. Rút gọn background
Mục đích của việc rút gọn thuộc tính là để dễ xem, dễ đọc, thuận tiện cho công tác chỉnh sửa cũng như đỡ tốn dung lượng ổ cứng
Ví dụ: Chúng ta có thể nhóm lại đoạn CSS sau
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background-image:url(images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
background-color:transparent;
}
</style>
</head>
<body>
<p>Demo viết rút gọn CSS.</p>
<p>Demo viết rút gọn CSS.</p>
<p>Demo viết rút gọn CSS.</p>
<p>Demo viết rút gọn CSS.</p>
</body>
</html>
Ví dụ: Viết rút gọn CSS ví dụ trên
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background:url(images/bg.jpg) no-repeat fixed right bottom;
}
</style>
</head>
<body>
<p>Demo viết rút gọn CSS.</p>
<p>Demo viết rút gọn CSS.</p>
<p>Demo viết rút gọn CSS.</p>
<p>Demo viết rút gọn CSS.</p>
</body>
</html>
