Thuộc tính Background trong CSS

Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu cách thiết lập nền / thuộc tính background cho một phần tử bằng CSS.

Thuộc tính background trong CSS

Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu cách thiết lập nền / thuộc tính background cho một phần tử bằng CSS.

Thuộc tính background trong CSS
Thuộc tính background trong CSS

Thiết lập thuộc tính background trong CSS

Background đóng một vai trò quan trọng trong việc trình bày trực quan của một trang web.

Và CSS cung cấp một số thuộc tính để tạo kiểu background cho một phần tử, bao gồm tô màu nền, đặt hình ảnh vào nền và quản lý vị trí của chúng, v.v.

Thuộc tính background trong CSS gồm có:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position.

Để tìm hiểu chi tiết hơn về những thuộc tính background trong css này thì chúng ta sẽ sang phần tiếp theo.

Thuộc tính background-color trong CSS

Thuộc tính background-color được sử dụng để thiết lập màu nền của một phần tử.

Ví dụ sau minh họa cách thiết lập background (màu nền) của toàn bộ trang.

Mã HTML:

<body>
    <h1>Demo thuộc tính background-color</h1>
    <p>Thuộc tính background-color trong CSS.</p>
</body>

Mã CSS:

body {
    background-color: #f0e68c;
}
h1 {
    background-color: #46c79c;
}

Giá trị màu sắc phải là các giá trị theo định dạng phổ biến như:

  • Tên màu – Ví dụ ‘red’
  • Mã màu Hex – Ví dụ ‘#ff0000’
  • Mã màu RBG – Ví dụ rgb(255, 0, 0)

Bạn có thể xem lại bài Thuộc tính màu sắc trong CSS để hiểu rõ hơn cách thiết lập các giá trị màu.

Thuộc tính background-image trong CSS

Thuộc tính background-image trong CSS thiết lập hình ảnh làm nền của thành phần HTML được chỉ định.

Hãy xem ví dụ sau đây để hiểu cách thiết lập hình nền cho toàn bộ trang thông qua thuộc tính background-image

Mã HTML:

<body>
    <h1>Demo thuộc tính background-image</h1>
    <p>Thuộc tính background-image trong CSS.</p>
</body>

Mã CSS:

body {
    background-image: url("/examples/images/tile.png");
}

Ở đây, url(“/examples/images/tile.png”) là đường dẫn tới hình ảnh được chọn làm nền.

Lưu ý: Khi thiết lập hình nền cho một thành phần HTML, hãy đảm bảo rằng bạn vẫn có thể đọc được nội dung văn bản trong phần tử đó một cách dễ dàng.

Mẹo: Theo mặc định, trình duyệt lặp lại hoặc xếp hình nền theo cả chiều ngang và chiều dọc để lấp đầy toàn bộ khu vực của một thành phần (nếu hình nền của bạn là nhỏ). Bạn có thể kiểm soát điều này với thuộc tính background-repeat

Thuộc tính background-repeat trong CSS

Thuộc background-repeat trong CSS cho phép bạn kiểm soát cách hình ảnh nền được lặp lại hoặc lát trong nền của một phần tử.

Bạn có thể thiết lập hình nền để lặp lại theo chiều dọc (trục y), theo chiều ngang (trục x), theo cả hai hướng hoặc theo cả hai hướng.

Hãy thử ví dụ sau minh họa cách thiết lập nền cho trang web bằng cách lặp lại hình ảnh được cắt theo chiều ngang dọc theo trục x.

Mã HTML:

<body>
    <h1>Demo thuộc tính background-repeat</h1>
    <p>Thuộc tính background-repeat trong CSS.</p>
</body>

Mã CSS:

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

Tương tự, bạn có thể sử dụng giá trị repeat-y để lặp lại hình nền theo trục y hoặc giá trị no-repeat để ngăn hình nền lặp lại.

Mã HTML:

<body>
    <h1>Demo thuộc tính background-repeat</h1>
    <p>Thuộc tính background-repeat trong CSS.</p>
</body>

Mã CSS:

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

Hãy thử chạy chúng trong trình duyệt để hiểu cách chúng hoạt động bạn nhé.

Minh họa thuộc tính background-repeat trong CSS
Minh họa thuộc tính background-repeat trong CSS

Thuộc tính background-position trong CSS

Thuộc tính background-position trong CSS được sử dụng để kiểm soát vị trí của hình nền.

Nếu không có background-position nào được chỉ định, hình ảnh nền được đặt ở vị trí trên cùng bên trái của phần tử, ví dụ tại (0,0), hãy thử ví dụ sau:

Mã HTML:

<body>
    <h1>Demo thuộc tính background-position</h1>
    <p>Thuộc tính background-position trong CSS.</p>
</body>

Mã CSS:

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

Bạn thấy nếu không thiết lập thuộc tính background-position thì trông hình nền hiển thị ở vị trí nào?

Trong ví dụ sau, hình nền được đặt ở góc trên bên phải.

Mã CSS:

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

Lưu ý: Nếu hai giá trị được chỉ định cho thuộc tính background-position, giá trị đầu tiên đại diện cho vị trí nằm ngang và giá trị thứ hai đại diện cho vị trí dọc. Nếu chỉ có một giá trị được chỉ định, giá trị thứ hai được coi là center (trung tâm).

Bên cạnh các từ khóa, bạn cũng có thể sử dụng các giá trị phần trăm hoặc độ dài, chẳng hạn như px hoặc em cho thuộc tính này.

Chúng ta hãy xem hình minh họa sau đây để hiểu cách thức hoạt động của thuộc tính background-position trong CSS.

Minh họa thuộc tính background-position trong CSS
Minh họa thuộc tính background-position trong CSS

Thuộc tính background-attachment trong CSS

Thuộc tính background-attacment trong CSS xác định xem hình nền có được cố định liên quan đến chế độ xem hoặc cuộn cùng với khối chứa nó hay không.

Hãy thử ví dụ sau để hiểu cách thức hoạt động của nó:

Mã HTML:

<body>
    <h1>Demo thuộc tính background-attachment</h1>
    <p><strong>Tip:</strong> Cuộn màn hình để thấy cách thuộc tính background-attachment hoạt động.</p>
    <br>
    <p>Đây là một dòng văn bản demo</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p>Đây là một dòng văn bản demo</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p>Đây là một dòng văn bản demo</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p>Đây là một dòng văn bản</p>
</body>

Mã CSS:

body {
    background-image: url("images/bell.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Cách viết tắt để thiết lập thuộc tính background trong CSS

Như bạn có thể thấy trong các ví dụ trên, có nhiều thuộc tính cần xem xét khi xử lý nền.

Tuy nhiên, bạn cũng có thể chỉ định tất cả các thuộc tính này trong một thuộc tính background để rút ngắn code hoặc tránh thiếu sót.

Ví dụ, bình thường để rõ ràng bạn sẽ viết như thế này:

body {
    background-color: #f0e68c;
    background-image: url("images/smiley.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 250px 25px;
}

Và bạn có thể viết tắt để thiết lập thuộc tính background như sau:

body {
    background: #f0e68c url("images/smiley.png") no-repeat fixed 250px 25px;
}

Lưu ý: Khi sử dụng cách viết tắt, thứ tự các giá trị phải là:

background: color image repeat attachment position;

Nếu giá trị cho thuộc tính nền riêng lẻ bị thiếu hoặc không được chỉ định trong khi sử dụng ký hiệu tốc ký, giá trị mặc định cho thuộc tính đó sẽ được sử dụng thay thế, nếu có.

Lưu ý: Các thuộc tính background không được kế thừa như thuộc tính color, nhưng nền của phần tử cha sẽ được hiển thị theo mặc định.

Bạn đã hiểu hơn về thuộc tính background trong CSS chưa?

Như vậy, mình đã hướng dẫn giúp bạn hiểu thêm về thuộc tính background trong CSS cũng như các thuộc tính cụ thể để thiết lập nền cho phần tử HTML.

Đây chỉ là một thuộc tính rất nhỏ trong CSS nhưng cực kỳ quan trọng. Mỗi bài viết mình sẽ hướng dẫn cụ thể để bạn có thể tích lũy dần dần cho mình kỹ năng, kiến thức về lập trình web.

Nếu bạn muốn học lập trình web nhanh hơn và có người hướng dẫn trực tiếp, hãy tham khảo: Khóa học Java (Fullstack) và Khóa học PHP (Fullstack)

Hãy luyện tập thật nhiều để hiểu rõ cách chúng hoạt động, tương tác hơn bạn nhé.

Chúc bạn thành công.

Học tiếp: Thuộc tính font trong CSS

Đọc thêm: Thuộc tính màu sắc trong CSS

Trả lời

Email 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 *