Multiple Background in CSS

Multiple Background is an advanced property to handle background in CSS.

Multiple Background is an advanced property to handle background in CSS, used to add one or more background images to an element without using HTML code.

In this article, TipsMake.com will work with you to learn about the following attributes:

  1. background-size
  2. background-origin
  3. background-clip

What is Multiple Background?

CSS allows you to add multiple backgrounds to an element, via the background-image attribute .

Different backgrounds are separated by commas and images are stacked, in which the image that is previously declared will be at the top, closest to the viewer.

Multiple background syntax is:

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

Setting properties for each image uses the following structure:

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

Example: There are two separate images and want it to be the background for your element:

Picture 1 of Multiple Background in CSS
Picture 2 of Multiple Background in CSS
 #example1 { 
background-image: url(multiplebackground-4.png), url(multiplebackground-1.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

Results show:

TipsMake.com - Programming Category

Learn basic programming with programming languages ​​C, C ++, Python, JavaScript, PHP, CSS, HTML5. In addition, you can find instructions on databases, SQL Server here.

You can become a part of TipsMake.com by submitting your articles, experiencing your technology to the management team.

Full code:








Multiple Background


The div element has two overlapping backgrounds:




 

Website TipsMake.com


 

TipsMake.com is a social network of science and technology, meeting the demand for
more technology areas such as smart phones, smart devices, electronics,
computer security .


 

You can become part of TipsMake.com by submitting an article,
Experience your technology on the management team.





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

Website TipsMake.com

Category Technology Village

Technology category

Category Life

1 value:

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

Category Technology Village

Sub-section of Technology Stories

Sub-category of Artificial Intelligence

Sub-section of Technology Comments

The original size is like this:

Technology category

Program sub-category

Application sub-category

Sub-category Game - Games

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

What is CSS - Website TipsMake.com

CSS stands for English phrase "Cascading Style Sheet".

CSS describes how HTML elements display on the screen and other media.

CSS is very useful and convenient. It can control all pages on a website.

2 values:

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

Why should CSS be used? - Website TipsMake.com

CSS helps solve big problems of HTML.

CSS is used to define styles for pages on your website, including design, layout, and display styles across multiple devices with different screen sizes.

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

Background-size with contain value

Example: Cover value

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

Background-size with cover value

 

The original size is like this:

Website TipsMake.com

 

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;

TipsMake.com

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

What is HTML?

HTML stands for Hypertext Markup Language for web page layout and formatting. HTML helps users create and structure components in web pages or applications.

HTML is not a programming language , which means that it cannot create 'dynamic' functions that allow you to solve problems, such as math equations, manipulating data or moving a kernel video game object.

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

Python programming language

Python is a powerful, high-level, object-oriented programming language, created by Guido van Rossum. It is easy to learn and emerging as one of the best introductory programming languages ​​for people who are first exposed to programming languages. Python completely creates dynamic style and uses automatic memory allocation mechanism. Python has a powerful high-level data structure and a simple but effective approach to object-oriented programming.

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

SQL language

SQL, short for Structured Query Language, is a structured query language that allows you to access and manipulate databases to create, delete, modify and extract data. SQL is also the standard language for relational database systems. All database management systems (RDBMS) such as MySQL, MS Access, Oracle, Sybase, Informix, Postgres or SQL Server all take SQL as the standard database language.

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

SQL Server

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

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

What is JavaScript?

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

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

C # programming language

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

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

Update 25 May 2019
Category

System

Mac OS X

Hardware

Game

Tech info

Technology

Science

Life

Application

Electric

Program

Mobile