Multiple Background trong CSS

Quách Tỉnh

Multiple Background là một thuộc tính nâng cao để xử lý background trong CSS, được sử dụng để thêm một hoặc nhiều ảnh nền cho một phần tử mà không cần sử dụng code HTML.

Ở bài viết này, Quantrimang.com sẽ cùng bạn tìm hiểu về các thuộc tính sau:

background-size
background-origin
background-clip

Multiple Background là gì?

CSS cho phép bạn thêm nhiều background cho một phần tử, thông qua thuộc tính background-image.

Các hình nền khác nhau được phân tách bằng dấu phẩy và ảnh được xếp chồng lên nhau, trong đó hình ảnh nào được khai báo trước sẽ nằm ở trên cùng, gần nhất với người xem.

Cú pháp của Multiple background là:

background : url(background-link-1), url(background-link-1)...;

Thiết lập các thuộc tính cho từng image thì sử dụng cấu trúc như sau:

background-position: top left, right bottom;
background-repeat: no-repeat, no-repeat;

Ví dụ: Có ta có 2 hình ảnh riêng biệt và muốn nó trở thành background cho phần tử của bạn:

#example1 {
  background-image: url(multiplebackground-4.png), url(multiplebackground-1.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Kết quả hiển thị:

Quản Trị Mạng - Chuyên mục Lập trình

Học lập trình cơ bản với ngôn ngữ lập trình C, C++, Python, JavaScript, PHP, CSS, HTML5. Ngoài ra bạn còn có thể tìm thấy hướng dẫn về cơ sở dữ liệu, SQL Server tại đây.

Bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý.

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background-image: url(multiplebackground-4.png), url(multiplebackground-1.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>Multiple Background</h1>
<p>Phần tử div có hai background chồng lên nhau:</p>

<div id="example1">
  <h1>Website Quản Trị Mạng</h1>
  <p>Quantrimang.com là mạng xã hội về khoa học công nghệ, đáp ứng nhu cầu về 
  nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, 
  bảo mật máy tính...</p>
  <p>Bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết, 
  trải nghiệm công nghệ của mình về cho đội ngũ quản lý.</p>
</div>

</body>
</html>

Multiple background có thể được định dạng bằng cách sử dụng thuộc tính background riêng lẻ như ví dụ trên. Ngoài ra bạn có thể dùng cách khai báo tắt, ngắn hơn (background shorthand), ví dụ như này:

#example1 {
  background: url(multiplebackground-4.png) right bottom no-repeat, 
  url(multiplebackground-1.png) left top repeat;

Kết quả thu được tương tương tự như trên.

Định dạng kích thước cho background (background-size)

Thuộc tính background-size CSS cho phép bạn cố định thước của background.

Kích thước có thể được chỉ định theo một số giá trị:

Độ dài
Tỷ lệ phần trăm
Keyword: contain hoặc cover.

1. Thuộc tính background-size với giá trị độ dài theo đơn vị (thường là pixel)

Background-size có thể có 1 giá trị hoặc 2 giá trị độ dài theo sau tùy bạn sử dụng:

1 giá trị: Xác định giá trị của chiều cao, chiều rộng sẽ tự động chỉnh theo (auto).
Ví dụ: background-size: 100px. Cách này sẽ hiển thị hình ảnh theo đúng tỉ lệ nhưng thường sẽ tràn hình ra ngoài phần tử.
2 giá trị: Xác định cả 2 giá trị chiều cao và chiều rộng. Tuy nhiên cách này sẽ làm hình ảnh méo mó, không đúng tỉ lệ chuẩn như ban đầu.
Ví dụ: background-size: 300px 150px;

Ví dụ: Thay đổi kích thước theo độ dài hình ảnh (sử dụng pixel):

2 giá trị:

#div1 {
  background: url(multiplebackground-4.png);
  background-size: 300px 150px;
  background-repeat: no-repeat;
}

Website Quản Trị Mạng

Chuyên mục Làng Công nghệ

Chuyên mục Công nghệ

Chuyên mục Cuộc sống

1 giá trị:

#div2 {
  background: url(multiplebackground-4.png);
  background-size: 300px;
  background-repeat: no-repeat;
}

Chuyên mục Làng Công nghệ

Chuyên mục con Chuyện Công nghệ

Chuyên mục con Trí tuệ Nhân tạo

Chuyên mục con Bình luận Công nghệ

Size gốc thì như này:

Chuyên mục Công nghệ

Chuyên mục con Lập trình

Chuyên mục con Ứng dụng

Chuyên mục con Game - Trò chơi

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 1px solid #7e3d36;
  background:url(multiplebackground-4.png);
  background-size: 300px 150px;
  background-position: right bottom;
  background-repeat: no-repeat;
  padding:15px;
}

#example2 {
  border: 1px solid #7e3d36;
  background:url(multiplebackground-4.png);
  background-size: 300px;
  background-position: right bottom;
  background-repeat: no-repeat;
  padding:15px;
}

#example3 {
  border: 1px solid #7e3d36;
  background:url(multiplebackground-4.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  padding:15px;
}
</style>
</head>
<body>

<h1>Định dạng kích thước cho background (background-size)</h1>

<p>Thuộc tính background-size với giá trị 2 thành phần:</p>
<div id="example1" style="color:#7e3d36">
  <h2>Website Quản Trị Mạng</h2>
  <p>Chuyên mục Làng Công nghệ</p>
  <p>Chuyên mục Công nghệ</p>
  <p>Chuyên mục Cuộc sống</p>
</div>

<p>Thuộc tính background-size với giá trị 1 thành phần:</p>
<div id="example2" style="color:#7e3d36">
  <h2>Chuyên mục Làng Công nghệ</h2>
  <p>Chuyên mục con Chuyện Công nghệ</p>
  <p>Chuyên mục con Trí tuệ Nhân tạo</p>
  <p>Chuyên mục con Bình luận Công nghệ</p>
</div>

<p>Kích thước ban đầu background-image:</p>
<div id="example3" style="color:#7e3d36">
  <h2>Chuyên mục Công nghệ</h2>
  <p>Chuyên mục con Lập trình</p>
  <p>Chuyên mục con Ứng dụng</p>
  <p>Chuyên mục con Game - Trò chơi</p>
</div>

</body>
</html>

2. Thuộc tính background-size với giá trị %

Background-size có thể có 1 giá trị hoặc 2 giá trị phần trăm (%) theo sau tùy bạn sử dụng:

1 giá trị: Xác định giá trị chiều rộng theo % phần tử chứa hình ảnh, chiều cao sẽ tự động chỉnh theo tỷ lệ. Cách này sẽ hiển thị hình ảnh theo đúng tỉ lệ nhưng thường sẽ tràn hình ra ngoài phần tử.
Ví dụ: background-size: 100px. Cách này sẽ hiển thị hình ảnh theo đúng tỉ lệ nhưng thường sẽ tràn hình ra ngoài phần tử.
2 giá trị: Xác định giá trị của chiều cao và chiều rộng theo % phần tử chứa hình ảnh. Tuy nhiên cách này sẽ làm hình ảnh méo mó, không đúng tỉ lệ chuẩn như ban đầu.
Ví dụ: background-size: 300px 150px;

Ví dụ: Thay đổi kích thước hình ảnh thứ nhất theo % phần tử chứa hình ảnh:

1 giá trị:

#div1 {
  background: url(multiplebackground-4.png),url(multiplebackground-1.jpg);
  background-size: 50%;
  background-repeat: no-repeat, repeat;
}

CSS là gì - Website Quản Trị Mạng

CSS là viết tắt của cụm từ tiếng Anh "Cascading Style Sheet".

CSS mô tả cách các phần tử HTML hiển thị trên màn hình và các phương tiện khác.

CSS rất hữu ích và tiện lợi. Nó có thể kiểm soát tất cả các trang trên một website.

2 giá trị:

#div2 {
  background: url(multiplebackground-4.png), url(multiplebackground-1.jpg);
  background-size: 50% 50%;
  background-repeat: no-repeat, repeat;
}

Vì sao nên dùng CSS? - Website Quản Trị Mạng

CSS giúp giải quyết vấn đề lớn của HTML.

CSS được dùng để định nghĩa kiểu cách cho các trang trên website của bạn, gồm cả thiết kế, dàn trang và các cách hiển thị khác nhau trên nhiều thiết bị với kích thước màn hình khác nhau.

3. Thuộc tính background-size với giá trị contain

Với giá trị contain, background sẽ co giãn theo chiều rộng và chiều cao của phần tử chứa nó theo đúng tỉ lệ của hình ảnh, cả chiều rộng và chiều cao của hình ảnh phải vừa trong khu vực nội dung. Như vậy, tùy thuộc vào tỷ lệ của hình ảnh và phần tử chứa background, có thể có vị trí không được bao phủ bởi hình ảnh background.

4. Thuộc tính background-size với giá trị cover

Giá trị cover chia tỷ lệ hình ảnh background sao cho khu vực nội dung được bao phủ hoàn toàn bởi background (cả chiều rộng và chiều cao của background có thể vừa hoặc tràn ra ngoài khu vực nội dung). Như vậy, một số phần của background có thể không hiển thị trong khu vực phần tử chứa background.

Ví dụ: Giá trị contain

#div1 {
  background: url(multiplebackground-4.png);
  background-size: contain;
  background-repeat: no-repeat;
}

Background-size với giá trị contain

Ví dụ: Giá trị cover

#div2 {
  background: url(multiplebackground-4.png);
  background-size: cover;
  background-repeat: no-repeat;
}

Background-size với giá trị cover

Size gốc thì như này:

Website Quản Trị Mạng

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  border: 1px solid black;
  height:400px;
  width:500px;
  background:url(multiplebackground-4.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.div2 {
  border: 1px solid black;
  height:400px;
  width:500px;
  background:url(multiplebackground-4.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.div3 {
  border: 1px solid black;
  height:400px;
  width:500px;
  background:url(multiplebackground-4.png);
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Thuộc tính background-size</h1>

<h2>background-size: contain:</h2>
<div class="div1">
  <p>Quantrimang.com</p>
</div>

<h2>background-size: cover:</h2>
<div class="div2">
  <p>Quantrimang.com</p>
</div>

<h2>Không có background-size:</h2>
<div class="div3">
  <p>Quantrimang.com</p>
</div>

</body>
</html>

Xác định kích thước nhiều background

Thuộc tính background-size cũng chấp nhận nhiều giá trị cho kích thước background (phân cách bằng dấu phẩy), khi làm việc với multiple background.

Ví dụ sau có ba hình background được chỉ định, với giá trị background-size khác nhau với mỗi hình ảnh:

#example1 {
  background: url(multiplebackground-5.png) left top no-repeat, 
  url(multiplebackground-4.png) right bottom no-repeat, 
  url(multiplebackground-1.jpg) left top repeat;
  background-size: 100px, 200px, auto;

Quản Trị Mạng

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(multiplebackground-5.png) left top no-repeat, 
  url(multiplebackground-4.png) right bottom no-repeat, 
  urlmultiplebackground-1.jpg) left top repeat;
  padding: 15px;
  background-size: 100px, 200px, auto;
  color: #7e3d36;
}
</style>
</head>
<body>

<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p></p>
<p></p>
</div>

</body>
</html>

Thuộc tính background-origin

Thuộc tính background-origin dùng để xác đinh vị trí mà background image sẽ hiển thị. Nó có ba giá trị sau đây:

border-box: background image bắt đầu từ góc trên bên trái của viền border ngoài cùng.
padding-box: background image bắt đầu từ vị trí góc trên bên trái của padding (mặc định).
content-box: background image bắt đầu từ vị trí góc trên bên trái của nội dung bên trong.

Xem các ví dụ mô tả sau để dễ hiểu hơn.

#example1 {
  border: 10px solid #0d4b75;
  padding: 35px;
  background: url(multiplebackground-6.png);
  background-repeat: no-repeat;
  background-origin: padding-box;
}

HTML là gì?

HTML là viết tắt của Hypertext Markup Language dùng để bố cục và định dạng trang web. HTML giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng.

HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo ra các chức năng “động” cho phép bạn giải quyết các vấn đề, chẳng hạn như phương trình toán học, thao tác dữ liệu hoặc di chuyển một nhân vật trò chơi video.

#example2 {
  border: 10px solid #0d4b75;
  padding: 35px;
  background: url(multiplebackground-6.png);
  background-repeat: no-repeat;
  background-origin: border-box;
}

Ngôn ngữ lập trình Python

Python là ngôn ngữ lập trình hướng đối tượng, cấp cao, mạnh mẽ, được tạo ra bởi Guido van Rossum. Nó dễ dàng để tìm hiểu và đang nổi lên như một trong những ngôn ngữ lập trình nhập môn tốt nhất cho người lần đầu tiếp xúc với ngôn ngữ lập trình. Python hoàn toàn tạo kiểu động và sử dụng cơ chế cấp phát bộ nhớ tự động. Python có cấu trúc dữ liệu cấp cao mạnh mẽ và cách tiếp cận đơn giản nhưng hiệu quả đối với lập trình hướng đối tượng.

#example3 {
  border: 10px solid #0d4b75;
  padding: 35px;
  background: url(multiplebackground-6.png);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Ngôn ngữ SQL

SQL, viết tắt của Structured Query Language, là ngôn ngữ truy vấn có cấu trúc, cho phép bạn truy cập và thao tác với các cơ sở dữ liệu để tạo, xóa, sửa đổi, trích xuất dữ liệu. SQL cũng là ngôn ngữ tiêu chuẩn cho các hệ cơ sở dữ liệu quan hệ. Tất cả các hệ thống quản trị cơ sở dữ liệu (RDBMS) như MySQL, MS Access, Oracle, Sybase, Informix, Postgres hay SQL Server đều lấy SQL làm ngôn ngữ cơ sở dữ liệu tiêu chuẩn.

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style>
div { text-align: right; color: #0d4b75; }
#example1 {
  border: 10px solid #0d4b75;
  padding: 35px;
  background: url(multiplebackground-6.png);
  background-repeat: no-repeat;
}

#example2 {
  border: 10px solid #0d4b75;
  padding: 35px;
  background: url(multiplebackground-6.png);
  background-repeat: no-repeat;
  background-origin: border-box;
}

#example3 {
  border: 10px solid #0d4b75;
  padding: 35px;
  background: url(multiplebackground-6.png);
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>
</head>
<body>

<h1>Thuộc tính background-origin</h1>

<p>Không sử dụng background-origin (mặc định padding-box):</p>
<div id="example1">
  <h2>HTML là gì?</h2>
  <p>HTML là viết tắt của Hypertext Markup Language dùng để bố cục và định 
  dạng trang web. HTML giúp người dùng tạo và cấu trúc các thành phần trong 
  trang web hoặc ứng dụng.</p>
  <p>HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể 
  tạo ra các chức năng “động” cho phép bạn giải quyết các vấn đề, chẳng hạn 
  như phương trình toán học, thao tác dữ liệu hoặc di chuyển một nhân vật trò 
  chơi video.</p>
</div>
</div>

<p>background-origin: border-box:</p>
<div id="example2">
  <h2>Ngôn ngữ SQL</h2>
  <p>SQL, viết tắt của Structured Query Language, là ngôn ngữ truy vấn có cấu 
  trúc, cho phép bạn truy cập và thao tác với các cơ sở dữ liệu để tạo, xóa, 
  sửa đổi, trích xuất dữ liệu.</p>
</div>

<p>background-origin: content-box:</p>
<div id="example3">
  <h2>Ngôn ngữ lập trình Python</h2>
  <p>Python là ngôn ngữ lập trình hướng đối tượng, cấp cao, mạnh mẽ, được tạo 
  ra bởi Guido van Rossum. Nó dễ dàng để tìm hiểu và đang nổi lên như một 
  trong những ngôn ngữ lập trình nhập môn tốt nhất cho người lần đầu tiếp xúc 
  với ngôn ngữ lập trình. Python hoàn toàn tạo kiểu động và sử dụng cơ chế cấp 
  phát bộ nhớ tự động. Python có cấu trúc dữ liệu cấp cao mạnh mẽ và cách tiếp 
  cận đơn giản nhưng hiệu quả đối với lập trình hướng đối tượng. </p>
</div>

</body>
</html>

Thuộc tính background-clip

Thuộc tính background-clip giúp xác định phạm vi được thiết lập màu nền của phần tử. Nó có ba giá trị sau đây:

border-box: background color bắt đầu từ góc trên bên trái của viền border ngoài cùng (mặc định).
padding-box: background image bắt đầu từ vị trí góc trên bên trái của padding.
content-box: background image bắt đầu từ vị trí góc trên bên trái của nội dung bên trong.

Xem các ví dụ mô tả sau để dễ hiểu hơn.

#example1 {
  border: 10px dotted #0d4b75;
  padding:35px;
  background: #a5d5f5;
  background-clip: border-box;
  color: #0d4b75; 
}

SQL Server

MS SQL Server là hệ thống quản trị cơ sở dữ liệu quan hệ (RDBMS) của Microsoft. Nó được xây dựng cho các chức năng cơ bản như lưu trữ dữ liệu do nhu cầu sử các phần mềm theo mô hình khách - chủ. MS SQL Server có thể chạy được trên một hoặc nhiều máy dùng chung mạng.

#example2 {
  border: 10px dotted #cf7649;
  padding:35px;
  background: #f3dcd1;
  background-clip: padding-box;
  color: #cf7649;
}

JavaScript là gì?

JavaScript là một ngôn ngữ lập trình được sử dụng để tạo ra những trang web tương tác. Nó được tích hợp và nhúng trong HTML. JavaScript cho phép kiểm soát các hành vi của trang web tốt hơn so với khi chỉ có một mình HTML. JavaScript kết hợp vào HTML, chạy trên Windows, Macintosh và các hệ thống hỗ trợ Netscape khác.

#example3 {
  border: 10px dotted #58257b;
  padding:35px;
  background: #e9d8f4;
  background-clip: content-box;
  color: #58257b;
}

Ngôn ngữ lập trình C#

C# là một ngôn ngữ lập trình đơn giản, hiện đại, mục đích tổng quát, hướng đối tượng được phát triển bởi Microsoft và được phê chuẩn bởi European Computer Manufacturers Association (ECMA) và International Standards Organization (ISO).

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px dotted #0d4b75;
  padding:35px;
  background: #a5d5f5;
  color: #0d4b75; 
}

#example2 {
  border: 10px dotted #cf7649;
  padding:35px;
  background: #f3dcd1;
  background-clip: padding-box;
  color: #cf7649;
}

#example3 {
  border: 10px dotted #58257b;
  padding:35px;
  background: #e9d8f4;
  background-clip: content-box;
  color: #58257b;
}
</style>
</head>
<body>

<h1>Thuộc tính background-clip</h1>

<p>Không sử dụng background-clip (mặc định border-box):</p>
<div id="example1">
  <h2>SQL Server</h2>
  <p>MS SQL Server là hệ thống quản trị cơ sở dữ liệu quan hệ (RDBMS) của 
  Microsoft. Nó được xây dựng cho các chức năng cơ bản như lưu trữ dữ liệu do 
  nhu cầu sử các phần mềm theo mô hình khách - chủ. MS SQL Server có thể chạy 
  được trên một hoặc nhiều máy dùng chung mạng.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
  <h2>JavaScript là gì?</h2>
  <p>JavaScript là một ngôn ngữ lập trình được sử dụng để tạo ra những trang 
  web tương tác. Nó được tích hợp và nhúng trong HTML. JavaScript cho phép 
  kiểm soát các hành vi của trang web tốt hơn so với khi chỉ có một mình HTML. 
  JavaScript kết hợp vào HTML, chạy trên Windows, Macintosh và các hệ thống hỗ 
  trợ Netscape khác.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
  <h2>Ngôn ngữ lập trình C#</h2>
  <p>C# là một ngôn ngữ lập trình đơn giản, hiện đại, mục đích tổng quát, 
  hướng đối tượng được phát triển bởi Microsoft và được phê chuẩn bởi European 
  Computer Manufacturers Association (ECMA) và International Standards 
  Organization (ISO).</p>
</div>

</body>
</html>