thuộc tính background

thuộc tính background
Người đăng: Chiến Thần - Ngày: 09/01/2017

Thuộc tính background trong CSS giúp chúng ta xác định nền cho thẻ HTML. Bạn thấy nền màu xanh
đỏ,.. thấy ảnh nền thế này, thế kia. Đó chính là background. Thuộc tính background dùng khá thường
xuyên trong CSS.

Thuộc tính background là tổng hợp của tất cả các thuộc tính con. Khi viết CSS, bạn có thể thực hiện
riêng rẽ các thuộc tính con
•

background-color

•

background-image

•

background-repeat

•

background-attachment

•

background-position

Background Color
Thuộc tính Background Color dùng để xác định màu nền cho thẻ HTML.

Background Color được dùng với cấu trúc như sau


body {
background-color: red;
}
Xem demo.
Trong CSS, để xác định màu sắc, chúng ta thường sử dụng 1 trong các giá trị sau:
•

Mã màu. Ví dụ: #ff0000,…

•

Tên màu sắc. Ví dụ: red, black…

•

Hệ màu RGB. Ví dụ như: rgb(255,0,0)

Mã màu và hệ màu RGB bạn dùng photoshop để lấy. Còn tên màu thì nó là từ tiếng Anh của màu sắc.
Ví dụ sau sẽ thiết lập màu nền cho các thẻ h1, h2, h3
h1 {
background-color: green;

}
h2 {

background-color: blue;

}
h3 {
}

background-color: pink;

Xem demo.

Background Image
Background Image dùng để đặt ảnh nền cho thẻ html
Ví dụ:
body {
background-image: url("anh.jpg");
}
Xem demo.
Khi dùng ảnh làm nền thì cần chú ý các thuộc tính như sau:

background-repeat:
Thiết lập sự lặp đi lặp lại của ảnh để phủ hết thẻ HTML. background-repeat có giá trị như sau: repeat và
no-reepeat, repeat-x, repeat-y
repeat: ảnh sẽ lặp đi lặp lại đến khi nào phủ hết thẻ HTML. Măc định, khi thiết lâp background-image ảnh
repeat
No-repeat: ảnh không lặp đi 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ụ:
p {
background-image: url("anh.jpg");

background-repeat: no-repeat;
}
Xem demo.

background-attachment
. Dùng thuôc tính này để cố định ảnh khi nội dung HTML quá dài và kéo xuống dưới. Thuộc tính
background-attachment thường chỉ dùng 1 giá trị là Fixed.
Ví dụ:
body {
background-image: url("anh.jpg");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Xem demo.

Backgroud-position
. Dùng để thiết lập vị trí cho ảnh đặt làm background. Giá trị mặc định sẽ là top left.
Bạn có thể thể dùng các giá trị như sau: top, left, right, center, bottom. Trong 1 số trường hợp bạn có thể
px. Nó là 1 con số cụ thể nào đó.
Ví dụ:
body {
background-image: url("canh.jpg");
background-repeat: no-repeat;
background-position: right top;
}
Top right : nghĩa là ảnh nằm trên cùng phía bên phải
Xem demo.
hoặc
body {

background-image: url("canh.jpg");
background-repeat: no-repeat;
background-position: 10px 5px;
}
background-position: 10px 5px nghĩa là: ảnh cách lề trên 10px, cách lề trái 5px
Xem demo.


Khi đã quen cách dùng background rồi. Bạn có thể dùng tổng hợp lại để viết CSS cho nhanh.
Ví dụ:
body {
background: #ffffff url("canh.jpg") no-repeat right top;
}
Xem demo.
Nhớ thứ tự khi thiết lập giá trị các thuộc tính:
•

background-color

•

background-image

•

background-repeat

•

background-attachment

•

background-position

Nếu bạn không thiết lập thuộc tính nào đó, nó sẽ nhận giá trị mặc định.

Một vài chú ý:
Khi sử dụng các thuộc tính của CSS thì bạn phải dùng dấu gạch ngang chứ không phải dấu gạch dưới.
background-position chứ không phải background_position
Các đơn vị đi kèm phải viết sát, không có dấu cách. Ví dụ:
Sử dụng sai: background-position: 10 px 5px;
Đúng là: background-position: 10px 5px;
Đường dẫn ảnh ở các ví dụ mình đặt là: url("canh.jpg"). Nếu các bạn tải về máy chạy thử thì phải để đầy
đủ là url(" thì mới chạy đúng.
Nếu viết mỗi mình background thì CSS hiểu là background-color.
Ví dụ:
body {
background: red;
}
Cách để học nhanh thuộc tính background: Bạn chỉ cần nhớ background là thuộc tính đặt nền cho thẻ
HTML. Nền thì chỉ có màu sắc hoặc ảnh nền. Bạn cứ viết thuộc tính đơn giản đầu tiên. Sau đó, muốn căn
chỉnh gì thì mình thêm vào sử sau: đặt màu nền(background), đặt ảnh nền(background-image). Và chỉ
cần viết background. Các giá trị đằng sau chỉ cần đúng cấu trúc là CSS nó nhận biết hết
Muốn đặt màu nền:
body {
background: green;
}
Muốn đặt hình nền thì bạn lại dùng:

body {
background: url("canh.jpg");
}
Xem demo.
Kết luận: Thuộc tính background được dùng khá thường xuyên trong CSS. Do vậy, khi học HTML thì
bạn cần phải nắm được các dùng thuộc tính này.