Thuộc tính background của CSS

Trong quá trình thiết kế blog/website chắc hẳn những vấn đề liên quan đến thuộc tính background không ít lần đã làm bạn nhức đầu vì thế hôm nay mình sẽ chia sẻ đến bạn một bài viết mà mình cảm thấy khá đầy đủ về vấn đề này.

Tổng quát

Tính chất chính của background mà bạn cần biết đó là:

background-color : Đặt thuộc tính màu nền
background-image : Dùng ảnh làm màu nền cho một element
background-position : Ví trí của ảnh
background-repeat : Tùy chỉnh ảnh nền có lặp hay không, lặp kiểu nào...
background-attachment : Đặt chế đố ảnh nền scroll theo trang hoặc là ở vị trí cố định

Cách sử dụng đơn giản

background-color dùng khi bạn muốn đặt một màu solid cho một element, bạn có thể sử dụng theo 1 trong 4 cách sau:

background-color: #006600;
background-color: green;
background-color: rgb(0, 102, 0);
background-color: transparent;

Ví dụ: Bạn sử dụng thuộc tính background-color: #006600; cho đoạn văn bản

Troll VL

background-image bạn có thể dùng một ảnh bất kỳ trên internet hoặc cùng server để làm nền cho một element

background-image: url(http://www.trollvl.com/images/logo.png);
background-image: url(../images/logo.png);

Ví dụ: Bạn sử dụng thuộc tính chèn hình ảnh làm nền cho đoạn văn bản

Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL
Troll VL

• Nếu bạn dùng thẻ img thì người dùng có thể dễ dàng lưu lại file ảnh của bạn, nhưng nếu bạn không muốn họ lưu lại, bạn có thể dùng background-image để gây khó khăn cho người dùng.
• Và với thuộc tính hình ảnh nền bạn có thể áp dụng thêm các thuộc tính bên dưới cho nó.

background-position giúp bạn đặt chính xác vị trí ảnh so với thẻ HTML

background-position: left top; /* Đặt ảnh ở vị trí trên cùng bên trái */
background-position: 50px -10px; /* Đặt ảnh cách mép trái 50px và mép trên 10px */
background-position: 0% 50%; /* Căn ảnh theo % */
background-position: center center; /* Đặt ảnh ở chính giữa thẻ HTML */

background-repeat Tùy chỉnh ảnh nền có lặp hay không, lặp kiểu nào. Các giá trị chính của background-repeat:

background-repeat: repeat; /* Lặp theo 2 chiều ngang và dọc - Giá trị mặc định */
background-repeat: repeat-y; /* Chỉ lặp theo chiều dọc */
background-repeat: repeat-x; /* Chỉ lặp theo chiều ngang */
background-repeat: no-repeat; /* Không lặp */

background-attachment hẳn bạn ít thấy đoạn mã CSS này, chúng ta chỉ cần khai báo khi bạn muốn giữ nguyên ảnh nền khi di chuyển thanh cuộn (tham khảo twitter)

background-image: url(bg.gif);
background-repeat: repeat-x;
background-attachment: fixed;

Cách sử dụng ngắn
Sau khi đã rõ các tính chất của background, thay vì việc phải khai báo từng tính chất, bạn có thể khai báo thuộc tính background của một thẻ HTML như sau:

background: color image position attachment repeat;
background: #fff url(../images/bg.gif) left top scroll no-repeat;

Thông thường ta nên sử dụng:

background: url(../images/bg.gif) #fff no-repeat left top;

Tất cả các trình duyệt đều hiểu được các cách sử dụng này

Tham khảo Ntuts.Com