CSS Background

Summary

/* Shorthand */
background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

Background

• Background tính từ Padding area vào content box, việc này để tránh cho background color trùng lên border.

• background-image: url(xxxx) - Có thể lấy từ ảnh, hoặc gradient function.

• background-repeat - Nếu background image không cover full size của box, thì có thể lặp lại theo options:

  • repeat - image repeat vào các space còn trống, theo cả chiều ngang và dọc, phủ kín toàn bộ phần tử.
  • round - Hình nền sẽ lặp lại, được co giãn sao cho vừa khit với phần tử mà không có khoảng trống thừa., nếu k vừa thì hình ảnh sẽ bị co lại để khớp.
  • no-repeat - hiển thị 1 lần, k lặp lại
  • repeat-x/y - Lặp lại theo trục x và y
  • space - Hình ảnh nền lặp lại nhưng không bị cắt vào các khoảng trống còn lại sẽ được phân chia đều giữa các hìnhh ảnh.

• background-position - Chỉ định vị trí hiển thị background.

  • Nên start bằng top/ bottom/ left/ right, k nên start bằng xx%

• background-size - Điều chỉnh kích thước ảnh background

  • auto - giữ nguyên kích thước gốc
  • cover - co giãn để phủ kín toàn bộ phần tử. Có thể 1 số phần của hình ảnh sẽ bị cắt bớt nếu tỷ lệ khung hình của hình ảnh không khớp với phần tử chứa
  • contain - background image co giãn để vừa với phần tử chứa, nhưng vẫn giữ nguyên tỷ lệ khung hình. Không có phần nào của hình ảnh bị cắt, nhưng có thể có khoảng trống thừa trong phần tử

• background-attachment - kiểm soát cách hình ảnh nền di chuyển khi người dùng cuộn trang, qđ xem background image có di chuyển cùng nội dung hay giữ nguyên tại vị trí khi scroll.

  • scroll - image di chuyển cùng với nội dung của element khi scroll
  • fixed - image giữ nguyên tại 1 vị trí cố định trong của sổ trình duyệt
  • local - image cuộn theo nội dung phần tử chứa nó. Khi phần tử có thanh scrollbar riêng, hình ảnh nên sẽ di chuyêrn cùng nội dung bên trong phần tử đó.

• background-origin - cho phép thay đổi area of backgrounds associated with a particular box.

  • border-box/ padding-box/ content-box
  • default là padding-box

• background-clip - control what is visually seen from a background layer regardless of the bounds created by the background-origin property.

• Multiple background