Cập nhật · 2025-10-08

Màu nền trong CSS

Tìm hiểu chi tiết cách sử dụng các thuộc tính background trong CSS - màu nền, ảnh nền, gradient, background-size, position, attachment, clip, origin, và backdrop-filter.

Minh Lâm

@minhlam1996vn

Phần background (nền) trong CSS là yếu tố giúp giao diện trở nên sống động, phân tách bố cục và tạo điểm nhấn cho nội dung.

CSS cung cấp nhiều thuộc tính mạnh mẽ để bạn tùy chỉnh nền: từ màu đơn giản, ảnh, hiệu ứng gradient cho đến các kỹ thuật nâng cao như background-clip, background-origin, hay backdrop-filter.

Màu nền (background-color)

Dùng để tô màu nền cho phần tử HTML.

Giá trị mặc định là transparent, và chỉ áp dụng cho content + padding (không bao gồm margin).

<div class="box-color"></div>
<style>
  .box-color {
    width: 150px;
    height: 150px;
    margin: 50px;
    border: 20px solid red;
    outline: 20px solid blue;
    outline-offset: 30px;
    background-color: green;
  }
</style>

Có thể dùng:

Tên màu (red, blue, gray)
Mã HEX (#ff6600)
RGB, RGBA, HSL...

Ảnh nền (background-image)

Sử dụng background-image: url(...) để thêm ảnh nền cho phần tử.

Mặc định ảnh sẽ lặp lại theo cả hai chiều.

<div class="bg-image"></div>
<style>
  .bg-image {
    height: 500px;
    background-image: url('https://www.w3schools.com/cssref/img_tree.gif');
    background-color: #ccc;
  }
</style>

Ngăn ảnh lặp lại: background-repeat: no-repeat;

Nhiều ảnh nền cùng lúc

Bạn có thể chồng nhiều ảnh nền lên nhau. Ảnh được vẽ từ dưới lên trên.

<div class="multi-bg"></div>
<style>
  .multi-bg {
    width: 100%;
    height: 500px;
    background: #ccc;
    background-image:
      url(https://www.w3schools.com/cssref/paper.gif),
      url(https://www.w3schools.com/cssref/img_tree.gif);
    background-repeat: no-repeat, no-repeat;
    background-position:
      top left,
      center right;
  }
</style>

Hiệu ứng chuyển màu (linear-gradient)

Tạo nền chuyển màu mượt mà mà không cần ảnh.

Dùng background-image: linear-gradient(...).

<div class="bg-gradient"></div>
<style>
  .bg-gradient {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(red, green, blue);
  }
</style>

to right: từ trái sang phải
to bottom: từ trên xuống
45deg: góc tùy chỉnh
Có thể đặt điểm dừng: background-image: linear-gradient(red 30%, yellow 60%, green 100%);

Dễ tạo bằng CSS Gradient.

Background size

Điều chỉnh kích thước ảnh nền:

background-size: cover | contain | auto | <width> <height>;

Các giá trị của background-size:

<div class="bg-size"></div>
<style>
  .bg-size {
    width: 400px;
    height: 250px;
    background-image: url('https://images.unsplash.com/photo-1658656999426-0bec5cb212b3');
    background-repeat: no-repeat;
    background-size: auto; /* auto, contain, cover */
  }
</style>

cover: phủ kín, có thể cắt ảnh.
contain: hiển thị toàn ảnh, có thể dư khoảng trống.
200px 100px: đặt kích thước cụ thể.

background-size: 50% sẽ đặt chiều rộng của hình nền bằng 50% kích thước của phần tử và chiều cao sẽ được đặt thành auto

Định vị ảnh nền (background-position):

Xác định vị trí ảnh nền trong phần tử.

background-position: center center;: giữa phần tử
background-position: top right;: góc trên bên phải
background-position: 50% 100%;: toạ độ X, Y

<div class="bg-pos"></div>
<style>
  .bg-pos {
    width: 400px;
    height: 400px;
    background-image: url('https://images.unsplash.com/photo-1677440758169-ec0136921cb5');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50px 100px; /* Dịch chuyển ảnh sang phải 50px và xuống dưới 100px. */
  }
</style>

Thuộc tính nâng cao

`background-attachment`

Xác định ảnh nền có cuộn theo trang hay không:

<div class="bg-attachment">...</div>
<style>
  .bg-attachment {
    height: 240px;
    color: #fff;
    overflow: auto;
    background-image: url(https://images.unsplash.com/photo-1568650558991-475bafc09d66);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: local; /* local, fixed */
  }
</style>

`background-clip`

Giới hạn vùng hiển thị màu nền/ảnh nền:

background-clip: content-box | padding-box | border-box;

Giá trị mặc định là border-box.

<div class="bg-clip"></div>
<style>
  .bg-clip {
    width: 600px;
    height: 200px;
    padding: 30px;
    border: 20px dotted brown;
    background-color: aliceblue;
    background-image: url(https://images.unsplash.com/photo-1617200645924-20d20ed1b2d3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80);
    background-size: contain;
    background-repeat: no-repeat;
    background-clip: content-box;
  }
</style>

`background-origin`

Xác định điểm gốc tính vị trí ảnh nền:

background-origin: content-box | padding-box | border-box;

Giá trị mặc định là padding-box.

<div class="bg-origin"></div>
<style>
  .bg-origin {
    height: 400px;
    padding: 40px;
    border: 20px dotted darkorange;
    background-image: url(https://images.unsplash.com/photo-1674574124976-a56d9052c2f8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
    background-size: cover;
    background-repeat: no-repeat;
    background-clip: content-box;
    background-origin: border-box;
  }
</style>

Viết gọn bằng shorthand

Tổ hợp nhiều thuộc tính trong một dòng duy nhất:

background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

<div class="bg"></div>

<style>
  .bg {
    height: 400px;
    padding: 30px;
    border: 2px dashed brown;
    background: url('https://images.unsplash.com/photo-1527061011665-3652c757a4d4')
      center / contain no-repeat;
  }
</style>

Hiệu ứng mờ nền (backdrop-filter)

Tạo hiệu ứng mờ cho nền phía sau phần tử, thường dùng trong overlay, modal hoặc navbar trong suốt.

<div class="wrapper">
  <div class="backdrop">The Mountain Between US</div>
</div>
<style>
  .wrapper {
    display: flex;
    height: 500px;
    background: url('https://images.unsplash.com/photo-1554176259-aa961fc32671')
      center / cover no-repeat;
  }
  .backdrop {
    width: 100%;
    height: 100px;
    margin-top: 200px;
    font-size: 30px;
    text-align: center;
    line-height: 3;
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: brightness(90%) blur(5px);
  }
</style>

Nếu dùng trình duyệt Safari, bạn cần thêm tiền tố -webkit- ở trước thuộc tính.

Chữ chuyển màu (Text Gradient)

Tạo hiệu ứng chữ chuyển màu bằng background-clip: text.

<h1 class="gradient-text">Học HTML CSS</h1>
<style>
  .gradient-text {
    color: transparent;
    background-image: linear-gradient(
      43deg,
      #4158d0 0%,
      #c850c0 46%,
      #ffcc70 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
  }
</style>

Kết luận

background-color: tô màu nền cơ bản
background-image: đặt ảnh nền
background-repeat: điều khiển việc lặp ảnh
background-size: thay đổi kích thước ảnh nền
background-position: định vị ảnh trong phần tử
background-attachment: cố định hoặc cuộn ảnh theo trang
background-clip / origin: kiểm soát vùng hiển thị nền
linear-gradient: tạo hiệu ứng chuyển màu mượt
backdrop-filter: làm mờ nền phía sau
shorthand: viết gọn, tối ưu mã CSS

Nắm vững các thuộc tính background sẽ giúp bạn dễ dàng tạo nên những giao diện sinh động, hiện đại và chuyên nghiệp.

Bài trước

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Bài tiếp theo

Lorem ipsum dolor sit, amet consectetur adipisicing elit.