Khác nhau giữa Background vs Background-Color trong CSS

Các bạn mới học CSS thường phải tiếp cận rất nhiều thuộc tính trong CSS, chúng ta được học cách đổi màu background bằng cách sử dụng background hay background-color, học cách thay đổi màu chữ sử dụng thuộc tính color...

Trong bài viết này, chúng ta cùng tìm hiểu về hai thuộc tính đó là background vs background-color để xem chúng có điểm gì giống và khác nhau nhé ^^.

Trong CSS, background và background-color là hai thuộc tính khác nhau. Đối với background, chúng được sử dụng để set nhiều thuộc tính background chỉ trong một khai báo.

Ví dụ:

.logo-container{
  background: url("./homiedev-logo.png") #ccc no-repeat;
}

Ví dụ trên sẽ tương đương với cách viết sau:

background-image: url(“url/image.jpg”);
background-repeat: no-repeat;
background-color: #ccc;

Vậy khi các bạn đã quen với các thuộc tính như background-image, background-repeat, hay các thuộc tính khác của background(background-*) thì chúng ta có thể sử dụng thuộc tính background để viết gọn chúng lại giúp tiết kiệm thời gian code.

Ta cũng thấy trong ví dụ có thuộc tính background-color: #ccc, thuộc tính background-color dùng để set màu background cho phần tử, đơn giản vậy thôi 😁.

Khi chúng ta sử dụng background thì nó sẽ remove style các thuộc tính chúng ta đã khai báo trước đó.

Ví dụ ta set background-image: url(“url/image.jpg”);, background-color: #ccc;. Vì một lý do nào đó, ta add một class có sử dụng thêm background: blue thì phần tử của chúng ta sẽ có background là blue và không còn background image đã set trước đó.

Ta có thể xem một ví dụ để hiểu rõ hơn:

.container {
	height: 100px;
	width: 100px;
	background-color: black;
	background-image: url("./homiedev-logo.png");
	background-repeat: no-repeat;
}

.bg-red {
	background: blue;
}

.bg-blue {
	background-color: blue;
}

Nếu bạn muốn thay đổi màu background cho container thì chúng ta sẽ phải sử dụng background-color, vì thuộc tính này chỉ ảnh hưởng đến color của background ^^. Nếu sử dụng background sẽ làm mất các thuộc tính ta đã set trước đó.

Các bài viết hay khác:

1. Khác nhau giữa width vs max-width trong CSS
2. CSS Units - Tìm hiểu về REM và EM trong CSS
3. Khác nhau giữa display: none vs visibility: hidden trong CSS
4. image-set() trong CSS bạn đã biết chưa?