Multiple background can be formatted using the individual background attribute as above example. In addition, you can use a short, shorter (background shorthand) declaration, such as this:

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

The results are similar to the above.

Format the size for the background (background-size)

The background-size CSS attribute allows you to fix the size of the background.

Size can be specified according to some values:

1. Length
2. Percentage
3. Keyword: contain or cover.

1. Background-size attribute with value in units of length (usually pixels)

Background-size can have 1 value or 2 length values ​​following you use:

1. 1 value: Determine the value of height, width will automatically adjust according to (auto).
   For example: background-size: 100px. This will display the image in the correct proportions but will often overflow the image.
2. 2 values: Determine both height and width values. However, this way will make the image distorted, not in the original standard.
   For example: background-size: 300px 150px;

Example : Change the size according to the image length (using pixels):

2 values:

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

1 value:

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

The original size is like this:

Full code:

Format the size for the background (background-size)

Background-size attribute with 2 component values:

Website TipsMake.com

Category Technology Village

Technology category

Category Life

Background-size attribute with 1 component value:

Category Technology Village

Sub-section of Technology Stories

Sub-category of Artificial Intelligence

Sub-section of Technology Comments

Original size background-image:

Technology category

Program sub-category

Application sub-category

Sub-category Game - Games

2. Background-size attribute with value%

Background-size can have 1 value or 2 percentage values (%) following you use:

1. 1 value: Specifies the width value by% of the element containing the image, the height will automatically adjust to the scale. This will display the image in the correct proportions but will often overflow the image.
   For example: background-size: 100px. This will display the image in the correct proportions but will often overflow the image.
2. 2 values: Determine the value of height and width by% of elements containing images. However, this way will make the image distorted, not in the original standard.
   For example: background-size: 300px 150px;

For example, resize the first image by% of elements containing the image:

1 value:

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

2 values:

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

3. The background-size attribute with the contain value

With contain values, the background will scale according to the width and height of the element that contains it according to the scale of the image , both the width and height of the image must fit within the content area . Thus, depending on the ratio of the image and the element containing the background, there may be a location that is not covered by the background image.

4. Background-size attribute with cover value

The cover value scales the background image so that the content area is completely covered by the background (both the width and height of the background can fit or overflow the content area). As such, some parts of the background may not display in the element area containing the background.

Example: Value container

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

Example: Cover value

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

The original size is like this:

Full code:

Background-size attribute

background-size: contain:

TipsMake.com

background-size: cover:

TipsMake.com

No background-size:

TipsMake.com

Define multiple background sizes

The background-size attribute also accepts many values ​​for the background size (separated by commas), when working with multiple backgrounds.

The following example has three designated background images, with different background-size values ​​for each image:

 #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; 

Full code:

Lorem Ipsum Dolor

 
 < 
 < p> 
 < p> 
 < p> 
 < /div> 

Background-origin attribute

The background-origin attribute is used to determine the location where the background image will appear. It has the following three values:

1. border-box: the background image starts from the upper left corner of the outer border.
2. padding-box: background image starts from the top left corner of the padding (default).
3. content-box: the background image starts from the top left corner of the content inside.

See the following examples to make it easier to understand.

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

 #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; 
 } 

Full code:

Background-origin attribute

Do not use background-origin (default padding-box):

What is HTML?

HTML stands for Hypertext Markup Language for layout and layout
website format. HTML helps users create and structure internal components
website or application.

HTML is not a programming language, which means it cannot
Create 'dynamic' functions that allow you to solve problems, for example
like math equations, manipulating data or moving a game character
play video.

background-origin: border-box:

SQL language

SQL, short for Structured Query Language, is a structured query language
structure, allowing you to access and manipulate databases to create, delete,
modify, extract data.

background-origin: content-box:

Python programming language

Python is a powerful, high-level, object-oriented programming language
by Guido van Rossum. It is easy to learn and emerging as one
in the best introductory programming languages ​​for first-time contact
with programming language. Python completely dynamically stylizes and uses the grant mechanism
play memory automatically. Python has a robust and highly structured data structure
Simple but effective approach to object-oriented programming.

Background-clip properties

The background-clip attribute helps determine the range of the element's background color. It has the following three values:

1. border-box: background color starts from the upper left corner of the outer border border (default).
2. padding-box: the background image starts from the top left corner of the padding.
3. content-box: the background image starts from the top left corner of the content inside.

See the following examples to make it easier to understand.

 #example1 { 
  border: 10px dotted #0d4b75; 
  padding:35px; 
  background: #a5d5f5; 
  background-clip: border-box; 
  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; 
 } 

Full code:

Background-clip properties

Do not use background-clip (default border-box):

SQL Server

MS SQL Server is a relational database management system (RDBMS) of
Microsoft. It is built for basic functions such as data storage due
the need to use client-server software models. MS SQL Server can run
be on one or more machines sharing the network.

background-clip: padding-box:

What is JavaScript?

JavaScript is a programming language used to create pages
interactive web. It is integrated and embedded in HTML. JavaScript enabled
control the behavior of the website better than when there is only HTML alone.
JavaScript combines into HTML, runs on Windows, Macintosh and support systems
Other Netscape support.

background-clip: content-box:

C # programming language

C # is a simple, modern, general purpose programming language,
Object-oriented is developed by Microsoft and approved by European
Computer Manufacturers Association (ECMA) and International Standards
Organization (ISO).

Previous article: Border Image - Create a picture border in CSS

Next lesson: Deep understanding of Color in CSS