Tuỳ chỉnh hình nền bằng Background CSS

Các thuộc tính Backgrond thường xuyên được sử dụng trong CSS để định nghĩa cho các hiệu ứng hay hình nền của các thẻ.

Các thuộc tính Background CSS bao gồm:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

css-backgrounds

1. Sử dụng Background Color trong CSS

Background Color là thuộc tính đặc biệt và thường được dùng trong các thẻ. Ví dụ: background color được dùng ở 1 trang:

body {
    background-color: lightblue;
}

Trong CSS thì màu sắc được định nghĩa bằng 3 kiểu:

  • giá trị của tên màu. Ví dụ: red
  • giá trị mã HEX. Ví dụ: #FF0000
  • giá trị mã RGB. Ví dụ: rgb(255,0,0)

Hãy đọc bài viết: Tuỳ chỉnh màu sắc trong CSS để biết thêm chi tiết

Một ví dụ sử dụng nhiều background color cho nhiều thẻ khác nhau:

background-color

2. Sử dụng Background Image trong CSS

Đây là một thuộc tính đặc biệt trong CSS sử dụng các hình ảnh để làm ảnh nền cho các thẻ.

Theo mặc định thì hình ảnh sẽ được lặp đi lặp lại ngang trên toàn bộ phần tử. Ví dụ: hình ảnh nền lặp đi lặp lại cho trang

background-color1

Chú ý: khi sử dụng thuộc tính background-image thì nên sử dụng ảnh không làm ảnh hưởng tới trải nghiệm đọc chữ

2.1. Sử dụng Background Image lặp ngang và lặp dọc trong CSS

Mặc định thì thuộc tính background-image sẽ lặp hình ảnh theo chiều ngang và chiều dọc (repeat horizontally và vertically)

Một vài hình ảnh chỉ cho phép bạn lặp theo chiều dọc hoặc chiều ngang.

Ví dụ: Hình ảnh được lặp theo chiều dọc Vertically

background-color2

Nếu muốn hình ảnh chỉ lặp theo chiều ngang thì bạn sử dụng: background-repeat: repeat-x;

background-color3

Chú ý: để hình ảnh lặp theo chiều dọc thì bạn sử dụng: background-repeat: repeat-y;

2.2. Sử dụng thuộc tính Set Position và no-repeat trong CSS

Sử dụng giá trị no-repeat cho thuộc tính backgroud-image

background-color4

Ở ví dụ phía dưới đây, hình nền sẽ hiển thị ở vị trí như là Text. Chúng tôi muốn thay đổi vị trí của hình ảnh để tránh làm ảnh hưởng đến Text

background-color5

2.3. Thuộc tính Background-image – Fixed Position

Trong một vài trường hợp bạn muốn cố định Background không bị di chuyển khi cuộn trang, hãy sử dụng thuộc tính: backgroud-attachment

background-color6

2.4. Sử dụng Backgournd-Shorthand propery

Để rút ngắn lại code, tất cả các thuộc tính của background sẽ được viết trên 1 dòng. Đây gọi là Shorthand property

Ví dụ: sử dụng Shorthand cho background:

background-color7

Khi bạn sử dụng Shorthand property  thì có các thuộc tính sau được sử dụng:

  • background-color: khai báo màu sắc cho phần tử
  • background-image: khai báo ảnh cho phần tử
  • background-repeat: cài đặt lặp ảnh cho phần tử
  • background-attachment: cài đặt cố định hay di động cho hình ảnh
  • background-position: cài đặt vị trí của ảnh

Trên đây là hướng dẫn sử dụng các thuộc tính Backgrounds khá chi tiết. Bạn hãy thực hành nó thường xuyên trước khi sang bài mới của Seri tự học CSS tại nhà nhé.

Chúc bạn vui vẻ!