CSS Background

Trong bài này chúng ta sẽ tìm hiểu về các thuộc tính liên quan đến background

Các thuộc tính Background dùng để cấu hình hình nền cho các phần tử trong trang. Trong bài này chúng ta sẽ học các thuộc tính sau:

• background-color

• background-image

• background-repeat

• background-position

• background-attachment

• background (shorthand property)

Background-color

Thuộc tính background-color quy định màu nền của một phần tử.

Cú pháp

background-color: value;

Ví dụ

body {
  background-color: red;
}

Giá trị của background-color là các Màu sắc trong CSS

background-color bị ảnh hưởng bởi opacity

Background-image

Thuộc tính background-image quy định ảnh nền của một phần tử bằng một hình ảnh.

Mặc định ảnh nền sẽ lặp lại để làm sao bao phủ toàn bộ phần tử.

Cú pháp

background-image: url(image-url);

Ví dụ

body {
  background-image: url("paper.gif");
}

Khi sử dụng hình ảnh làm hình nền thì nên tránh các ảnh nền có màu sắc làm rối nội dung của trang

Background-repeat

Cú pháp

background-repeat: value;

Bài toán

Mặc định background-image sẽ tự động lặp lại theo chiều ngang và chiều dọc để có thể bao phủ được hết phần tử tuy nhiên trong một vài trường hợp ảnh nền chỉ được lặp lại theo 1 trong 2 chiều vì chiều còn lại đã đủ kích thước gây ra kết quả chúng ta không mong muốn lắm như ảnh dưới.

Trong trường hợp này nếu ảnh có thể lặp lại theo chiều ngang có thể sẽ ổn hơn, lúc này ta sẽ dùng background-repeat: repeat-x; để thực hiện yêu cầu này.

Repeat

Giá trị background-repeat: repeat; là giá trị mặc định, giá trị này sẽ làm cho hình nền lặp lại theo cả chiều ngang và dọc.

body {
  background-image: url("img_tree.png");
  background-repeat: repeat;
}

No-repeat

Giá trị background-repeat: no-repeat; sẽ làm cho hình nền sẽ hiển thị 1 lần và không lặp lại theo hướng nào cả.

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

Repeat-x

Giá trị background-repeat: repeat-x; sẽ làm cho hình nền lặp lại theo chiều ngang (trục x).

body {
  background-image: url("img_tree.png");
  background-repeat: repeat-x;
}

Repeat-y

Giá trị background-repeat: repeat-y; sẽ làm cho hình nền lặp lại theo chiều dọc (trục y).

body {
  background-image: url("img_tree.png");
  background-repeat: repeat-y;
}

Space

Giá trị background-repeat: space; cũng khá giống với repeat được liệt kê như sau:

• Giống:

  • Cả repeat và space đều lặp theo 2 chiều.

• Khác:

  • Space sẽ cố gắng lặp nhiều nhất có thể nhưng sẽ không làm cho hình bị cắt xén(mất một phần)

  • Sau khi cố gắng xong thì khoảng trắng sẽ được chia đều giữa các hình nền được lặp

body {
  background-image: url("img_tree.png");
  background-repeat: space;
}

Round

Giá trị background-repeat: round; cũng khá giống với space về việc ảnh nền sẽ không bị cắt nhưng khác space ở chỗ ảnh nền khi round sẽ bị kéo dài, thu nhỏ để không còn khoảng trống nào.

body {
  background-image: url("img_tree.png");
  background-repeat: round;
}

Background-position

Thuộc tính background-position dùng để quy định vị trí của ảnh nền.

Cú pháp

background-position: value;

Ví dụ

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Giá trị

Giá trị	Mô tả
left top left center left bottom right top right center right bottom center top center center center bottom	Chúng ta có thể sử dụng tên để đặt giá trị. Nếu có duy nhất một giá trị, giá trị còn lại mặc định là center
x% y%	Chúng ta có thể dùng đơn vị % để gán giá trị. Giá trị đầu tiên là vị trí theo trục x và giá trị thứ 2 là theo trục y. Góc top left là 0% 0% Góc right bottom là 100% 100% Nếu chỉ có 1 giá trị thì giá trị còn lại mặc định là 50% Mặc định giá trị là 0% 0%
xpos ypos	Chúng ta có thể sử dụng đơn vị tuyệt đối để làm giá trị Giá trị đầu tiên là vị trí theo trục x và giá trị thứ 2 là theo trục y. Góc top left là 0 0 Đơn vị có thể là px hoặc bất cứ đơn vị hợp lệ nào. Nếu chỉ có 1 giá trị thì giá trị còn lại mặc định là 50% Bạn có thể phối hợp % và giá trị tuyệt đối với nhau.

Background-attachment

Trong một vài trường hợp nội dung dài thì trình duyệt sẽ xuất hiện một thanh cuộn, lúc này mặc định ảnh nền sẽ tự động chạy theo nội dung khi cuộn. Để giữ cho ảnh nền đứng yên khi cuộn lúc này chúng ta dùng thuộc tính background-attachment dùng để quy định background sẽ cuộn theo nội dung hay sẽ đứng yên khi nội dung di chuyển.

Cú pháp

background-attachment: value;

Scroll

background-attachment: scroll;

Giá trị mặc định, ảnh nền sẽ cuộn theo nội dung

Fixed

background-attachment: fixed;

Background sẽ đứng yên khi cuộn nội dung

Background shorthand

Cú pháp shorthand hay viết tắt giúp chúng ta viết nhiều cấu hình về background cho một phần tử cùng lúc thay vì chúng ta viết từng thuộc tính riêng biệt.

Ví dụ

Thay vì viết

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Chúng ta có thể viết tắt như sau:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Cú pháp

background: background-color background-image background-repeat 
    background-attachment background-position;

Chúng ta có thể viết thiếu giá trị cho một vài thuộc tính miễn là theo đúng thứ tự được quy định theo cú pháp

Thuộc tính background-attachment sẽ không áp dụng được trong cú pháp shorthand