Công ty thiết kế website chuẩn SEO Web Mới
Tìm kiếm
Công ty thiết kế website chuẩn SEO Web Mới

Thuộc tính background-image trong CSS

Thuộc tính background-image trong CSS dùng để tạo hình nền cho phần tử HTML hoặc kết hợp nhiều màu sắc để tạo hình nền cho phần tử HTML, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính background-image trong CSS

Thuộc tính background-image trong CSS

Chức năng của Thuộc tính background-image trong CSS

Thuộc tính background-image trong CSS dùng để tạo hình nền cho phần tử HTML hoặc kết hợp nhiều màu sắc để tạo hình nền cho phần tử HTML.

Code Thuộc tính background-image trong CSS

Thuộc tính background-image mặc định trong CSS

background-image một hình nhỏ, không thêm thuộc tính khác, mặc định nó tự lặp lại:

body  {
  background-image: url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-color: #cccccc;
  color:yellow
}

Chạy Thử

Thuộc tính background-image mặc định nhiều hình trong CSS

Hình nào đứng trước sẽ nằm trên hình đứng sau, 2 hình mặc định sẽ đều lặp:

body  {
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-color: #cccccc;
  color:yellow
}

Chạy Thử

Thuộc tính background-image no-repeat, repeat trong CSS

Repeat vị trí 1 sẽ tương ứng hình 1, repeat vị trí 2 tương ứng với hình 2:

body  {
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-repeat: no-repeat, repeat;
  background-color: #cccccc;
  color:yellow
}

Chạy Thử

Thuộc tính background-image canh giữa, full hình trong CSS

Căn giữa hình ảnh, thay đổi kích thước hình ảnh nền để bao phủ toàn bộ vùng chứa:

.hero-image {
  background-image: url("https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg");
  background-color: #cccccc;
  height: 500px;
  background-position: center; /*Căn giữa hình ảnh*/
  background-repeat: no-repeat;
  background-size: cover; /* Thay đổi kích thước hình ảnh nền để bao phủ toàn bộ vùng chứa */
  position: relative;
}

Chạy Thử

Thuộc tính background-image linear-gradient 2 màu trong CSS

Background tuyến tính từ trên xuống, chuyển dần từ màu đỏ sang màu vàng:

#divbg{
  height: 200px;
  background-color: #cccccc;
  background-image: linear-gradient(red, yellow);
}

Chạy Thử

Thuộc tính background-image linear-gradient 3 màu trong CSS

Background tuyến tính từ trên xuống, chuyển dần từ màu đỏ sang màu vàng, sau đó chuyển dần sang màu xanh:

#divbg{
  height: 200px;
  background-color: #cccccc;
  background-image: linear-gradient(red, yellow, green);
}

Chạy Thử

Thuộc tính background-image repeating-linear-gradient trong CSS

Background lặp lại các khối màu tuyến tính:

#divbg{
  height: 200px;
  background-color: #cccccc;
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Chạy Thử

Thuộc tính background-image radial-gradient 2 màu trong CSS

Background bắt đầu từ màu đỏ ở tâm chuyển dần sang màu vàng ra ngoài:

#divbg{
  height: 200px;
  background-color: #cccccc;
  background-image: radial-gradient(red, yellow);
}

Chạy Thử

Thuộc tính background-image radial-gradient 3 màu trong CSS

Background bắt đầu từ màu đỏ ở tâm chuyển dần sang màu vàng rồi chuyển dần sang màu xanh ra ngoài:

#divbg{
  height: 200px;
  background-color: #cccccc;
  background-image: radial-gradient(red, yellow, green);
}

Chạy Thử

Thuộc tính background-image repeating-radial-gradient trong CSS

Lặp lại các khối màu từ tâm ra ngoài:

#divbg{
  height: 200px;
  background-color: #cccccc;
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính background-image trong CSS.

  • 0 Bình luận
CEO Bùi Tấn Lực
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
  • Zalo
Chia sẻ nội dung đánh giá của bạn về Thuộc tính background-image trong CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn miễn phí
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
Kiến thức PHP
Kiến thức JavaScript
Kiến thức về website
Kiến thức SEO website
0398.259.259