CSS là một ngôn ngữ lập trình rất quen thuộc đối với việc thiết kế trang web, nó có nhiều thuộc tính khác nhau để tùy chỉnh giao diện. Trong đó, background attachment cũng là một thuộc tính được sử dụng thông dụng và quan trọng trong việc xác định cách mà hình ảnh nền sẽ được liên kết với phần tử HTML. Trong bài viết này, chúng ta sẽ tìm hiểu về background attachment trong CSS và cách mà nó sẽ ảnh hưởng đến trải nghiệm người dùng.

1. Background trong CSS là gì?

Trong CSS, ta có thuộc tính background cho phép chúng ta tùy chỉnh và định dạng hình ảnh nền, màu sắc nền và các thuộc tính liên quan cho phần tử HTML. Với thuộc tính này chúng ta có thể thay đổi đa dạng hơn các phần tử, đồng thời tạo nên các hiệu ứng trực quan, hấp dẫn hơn cho người xem.

Thuộc tính background trong CSS có thể được áp dụng cho tất cả các phần tử HTML (<body>, <div>). Tương ứng với thuộc tính background sẽ có các thuộc tính con cho phép chúng ta tùy chỉnh hình ảnh như sau:

Thuộc tínhTác động
background-colorXác định màu sắc cho phần tử, có thể dùng tên màu, mã hex hoặc hàm màu
Ví dụ: background-color: #f1f1f1;
background-imageXác định hình nền cho phần tử
Ví dụ: background-image: url("background-image.jpg");
background-repeatXác định cách hình nền lặp lại
Ví dụ: background-repeat: no-repeat;
background-positionXác định vị trí ban đầu của hình ảnh. Các giá trị: left, right, center, top, bottom, ta cũng có thể kết hợp các giá trị trên để có vị trí chính xác.
Ví dụ: background-position: center;
background-sizeXác định kích thước hình ảnh. Các giá trị: auto, cover (Tự động phủ kín phần tử), contain (Hình ảnh luôn nằm trong phần tử), hoặc ta có thể chỉ định kích thước cụ thể.
Ví dụ: background-size: cover;
background-attachmentXác định cách mà hình ảnh gắn kết với phần tử HTML. Các giá trị: scroll (Cuộn theo nội dung khi cuộn), fixed (Vị trí cố định)
Ví dụ: background-attachment: scroll;

Trên đây là một số thuộc tính ta có thể tùy chỉnh cho background trong CSS. Với bài viết này ta sẽ đi sâu hơn về thuộc tính background attachment trong CSS, nó là một thuộc tính quan trọng trong cách mà ta tùy chỉnh background trong CSS.

2. Cách sử dụng cho các thuộc tính background-attachment trong CSS

  • Cú pháp
background-attachment: scroll | fixed | local | initial | inherit;

Trên đây là cú pháp cũng như các giá trị mà ta sẽ sử dụng cùng với thuộc tính background-attachment. Sau đây, chúng ta sẽ cùng đi tìm hiểu kỹ hơn về các giá trị trên cũng như cách mà chúng tác động đến hình ảnh nền.

  • Thuộc tính scroll

Nền được cố định so với chính phần tử đó và không cuộn theo nội dung của nó. (Nó được gắn vào đường viền của phần tử một cách hiệu quả.)

Lưu ý: Khi thiết lập hình nền cho phần tử body thì khi cuộn trang hình nền sẽ bị cuộn theo.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style>
          body {
              background-image: url("https://vn-release-www.stringeextest.com/static/images/logo/logo1.png");
              background-repeat: no-repeat;
              background-attachment: scroll;
          }
    </style>
</head>
<body>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
</body>
</html>

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

  • Thuộc tính local

Nền được cố định so với nội dung của phần tử. Nếu phần tử có cơ chế cuộn, thì nền sẽ được cuộn theo nội dung của phần tử và khu vực vẽ nền cũng như khu vực định vị nền có liên quan đến vùng có thể cuộn của phần tử thay vì đường viền đóng khung chúng.

Lưu ý: Hình nền sẽ bị cuốn đi khi ta thiết lập đối với bất kỳ phần tử nào.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 1px solid #cfcfcf;
            height: 200px;
            overflow: auto;
            background-image: url("https://vn-release-www.stringeextest.com/static/images/logo/logo1.png");
            background-repeat: no-repeat;
            background-attachment: local;
        }
    </style>
</head>
<body>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <div>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    </div>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
</body>
</html>

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

CÔNG TY CỔ PHẦN STRINGEE.

  • Thuộc tính fixed

Với thuộc tính fixed, nền được cố định so với khung nhìn. Ngay cả khi một phần tử có cơ chế cuộn, hình ảnh nền vẫn sẽ được giữ cố định và không di chuyển cùng với phần tử.

Lưu ý:

  • Thuộc tính này không tương thích với background-clip: text.
  • Mặc định với thuộc tính này, cho dù hình nền được thiết lập trong phần tử nào thì hình nền vẫn sẽ hiển thị ở vị trí "góc phía trên bên trái". Nhưng ta có thể sử dụng thuộc tính background-position để thiết lập lại vị trí cho nó.
  • Nếu hình nền được thiết lập cho các phần phần tử nằm bên trong <body> thì khi hiển thị một số phần của nó có thể bị các phần tử khác đè lên.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            background-image: url("https://vn-release-www.stringeextest.com/static/images/logo/logo1.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
</body>
</html>
  • Thuộc tính initial

Đặt thuộc tính này thành giá trị mặc định của nó.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style>
          body {
              background-image: url("https://vn-release-www.stringeextest.com/static/images/logo/logo1.png");
              background-repeat: no-repeat;
              background-attachment: initial;
          }
    </style>
</head>
<body>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
</body>
</html>
  • Thuộc tính inherit

Kế thừa thuộc tính này từ phần tử cha của nó.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-attachment:fixed;
        }

        div {
            border:1px solid black;
            height: 300px;
            overflow-y: auto;
            background-image: url("https://vn-release-www.stringeextest.com/static/images/logo/logo1.png");
            background-repeat: no-repeat;
            background-attachment: inherit;
        }
    </style>
</head>
<body>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <div>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
        <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    </div>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
    <p>CÔNG TY CỔ PHẦN STRINGEE.</p>
</body>
</html>

Tổng kết

Qua các ví dụ trên, ta có thể thấy được sự linh hoạt của thuộc tính background-attachment trong CSS. Tùy thuộc và mục đích sử dụng và cũng như là ý tưởng thiết kế, ta sẽ có thể tạo đươc các hiệu ứng độc đáo để thu hút người dùng. Nó giúp chúng ta có trang web đẹp mắt, độc đáo và tăng tính tương tác của trang.

Background attachment trong CSS là một thuộc tính rất quan trong để xác định cách mà hình ảnh gắn kết với phần tử HTML. Việc ta lựa chọn cách hình ảnh hiển thị sẽ ảnh hưởng đến trải nghiệm người dùng và giao diện trang web. Với việc sử dụng chúng một cách thông minh, bạn có thể tạo ra trang web đẹp mắt hơn, cũng như tăng giá trị của trang trong mắt người dùng.

Stringee API  là bộ giải pháp cung cấp các tính năng như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài chăm sóc khách hàng (CSKH) có thể được nhúng trực tiếp vào các ứng dụng/website của doanh nghiệp nhanh chóng. Điều này giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp, trong khi nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Mời quý bạn đọc đăng ký dùng thử và nhận tư vấn tại đây: