[Tự Học CSS] Bài 3: Background

Thuộc tính Background chắc không xa lại với các bạn vì chúng ta đã gặp trong HTML. Trong CSS Background là một tập các thuộc tính dùng để định dạng nền cho website bao gồm: Background-color, background-image, background-attachment, background-repeat, background-position.

1. Background –color:

Background-color trong CSS tương tự như thuộc tính bgcolor trong HTML, chúng đều dùng để định dạng màu nền cho website.

Cú pháp: 

Bo_chon
{
Background-color:giatri;
}
- Bộ chọn có thể là bộ chọn thẻ, bộ chọn lớp , bộ chọn mã
- Nhận các giá trị là mã màu hệ 16 hoặc tên màu theo tiếng anh.

Ví dụ: 

Định dạng màu nền cho đoạn text theo các bộ chọn khác nhau

Trình duyệt hiển thị

2. Backgroud-image:

Đúng như cái tên của nó, đây là thuộc tính xác định ảnh nền cho website:

Cú pháp:

background-image:url(‘link’);
Link là liên kết tới hình ảnh.

Ví dụ: 

Chèn background thiet ke web bat dong san vào header của một website.

Chú ý: Ở đây mình dùng cả thuộc tính width:1000px; height:800px; kích thước hình ảnh là 1000x300px.
Trình duyệt hiển thị:

Ví dụ của mình, width=1000px và hình ảnh có độ rộng cũng là 1000px thì khi hiển thị nó không lặp lại.
Height =800px > độ cao của hình nên nó bị lặp lại.
Các bạn hãy thử bỏ width, heigh đi và thử xem trình duyệt hiển thị có gì khác!
Như bạn thấy trên các website, thông thường thì banner hiển thị không giống hình trên mà chỉ hiển thị 1 lần.
Nguyên nhân: - Kích thước phần định dạng ( ở đây là phần thẻ div có id= “header”) và thiếu thuộc tính background-repeat.

3. Background-repeat

Là thuộc tính xác định sự lặp lại của hình nền ( trong trường hợp hình ảnh nhỏ hơn kích thước phần định dạng).

Cú pháp:

Background-repeat:giatri;

Các giá trị:

• No-repeat: không lặp
• Repeat –x: lặp theo chiều ngang
• Repeat –y: lặp theo chiều dọc

Ví dụ:

Các bạn tìm hiểu về margin:0 auto nhé!

Trình duyệt hiển thị:

 Các bạn thử với các thuộc tính còn lại nhé!

4. Background-position

Dùng để định vị trí nền của website.

Cú pháp:

background-postion:giatri;

Giá trị:

• Top: bắt đầu từ trên
• Bottom: bắt đầu từ dưới
• Left: bắt đầu từ trái
• Right: bắt đầu từ phải

Ngoài ra có thể dùng đơn vị % để định vị trí nền.

Ví dụ:

Trình duyệt hiển thị:

5. Background-attachment:

Cú pháp: 

background-attachment:giatri;
Là thuộc tính xác định kiểu hiển thị của ảnh nền.

Giá trị:

• Fixed: cố định -> khi nội dung quá dài mà nền nhỏ thì  kéo thanh cuộn dọc thì nền website sẽ chạy theo thanh cuộn.
• Scroll (mặc định): khi kéo thanh cuộn nền vẫn giữ nguyên.

Các bạn tự code, cái này nhìn trực tiếp dễ hiểu hơn.
Chú ý: Cách viết tắt của bộ thuộc tính background:
Background:color image repeat attachment postion.

Bài tập thực hành.

Thiết kế một website như sau bằng cách sử dụng 3 cách khai báo css.

Các bạn chưa chắc kiến thức có thể xem lại bài 1 và bài 2 tại Tự Học CSS.

Chúc các bạn học tốt!