Các thuộc tính định dạng background trong CSS

Bài hôm nay chúng ta sẽ cùng tìm hiểu các thuộc tính định dạng background trong CSS. Đây là những thuộc tính khá quan trọng và quen thuộc trong một trang web.

Trong bài này mình sẽ định dạng theo kiểu internal để dễ hiểu hơn : Xem các cách viết CSS trong trang web

1. Thiết lập CSS màu nền cho background

Chúng ta có 2 thuộc tính là background-color hoặc background để định dạng với các giá trị màu là tên màu bằng tiếng anh hoặc mã màu đều được.

Ví dụ: Thiết lập màu nền cho toàn bộ trang là màu vàng.các thuộc tính định dạng background trong css 007

 

2. Thiết lập CSS ảnh nền cho background

Để thiết lập ảnh nền chúng ta có thuộc tính background-image với đường dẫn của hình nằm trong thẻ url.

Ví dụ : Thiết lập ảnh nền như saucác thuộc tính định dạng background trong css 006

 

3. Tùy chỉnh lặp hoặc không lặp background

Khi bạn lấy một hình nào đó làm ảnh nền mà nếu hình đó nhỏ hơn so với kích thước trang web thì mặc định hình ảnh sẽ bị lặp lại nhiều lần để lấp đủ các khoảng trắng qua đó làm cho trang web xấu hơn chẳng hạn. Để khắc phục trường hợp này chúng ta có thuộc tính background-repeat, với các giá trị chính :

  •  no-repeat : không lặp
  •  repeat : cho phép lặp
  •  repeat-x : lặp theo chiều ngang
  •  repeat-y : lặp theo chiều dọc

 

no-repeatcác thuộc tính định dạng background trong css 004
repeatcác thuộc tính định dạng background trong css 005
repeat-xcác thuộc tính định dạng background trong css 005
repeat-ycác thuộc tính định dạng background trong css 005

4. Tùy chỉnh vị trí hiển thị cho background

Khi bạn đặt hình nền và muốn vị trí hiển thị ở một vị trí nào đó như top, right, left, center, bottom … thì bạn có thuộc tính backgound-position. Cấu trúc như sau:

background-position : position1 position 2

Trong đó position1position2 gồm các giá trị :

  •  top : trên cùng
  •  right : bên phải
  •  left : bên trái
  •  center : ở giữa
  •  bottom : dưới cùng

Lưu ý : Khi bạn chọn giá trị phải theo quy luật như : left top, left bottom, right top… chứ không được chọn left right nghĩa là vừa sang trái vừa sang phải vì sẽ không tuân theo quy luật tọa độ.

Ví dụ : Hiển thị background ở giữacác thuộc tính định dạng background trong css 008

 

Ví dụ : Hiển thị background góc trên bên tráicác thuộc tính định dạng background trong css 009

Lời kết : Kết thúc bài hôm nay chúng ta đã tìm hiểu được các thuộc tính định dạng background trong CSS căn bản và quen thuộc của một website. Bài tới chúng ta sẽ cùng tìm hiểu cách sử dụng thuộc tính float trong CSS để thiết kế layout.

Chúc bạn thành công!

 

Những bài bạn nên xem:
  1. Các thuộc tính CSS định dạng văn bản (text)
  2. Các thuộc tính CSS định dạng thẻ a (link)
  3. Các vùng chọn CSS thông dụng (selector)
  4. Các cách viết CSS trong trang web
  5. CSS là gì? Cấu trúc CSS trong một website

 

#Cùng chuyên mục : Serie học HTML căn bản

 

Các thuộc tính định dạng background trong CSS
Đánh giá bài viết

Bình luận

Bình luận

Share this post