Advanced CSS: Multiple Background in CSS

Advanced CSS: Multiple Background in CSS is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

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:

• Length
• Percentage
• Keyword: contain or cover.

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

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

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

For instance,, 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 example below 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:

• border-box: the background image starts from the upper left corner of the outer border.
• padding-box: background image starts from the top left corner of the padding (default).
• 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:

• border-box: background color starts from the upper left corner of the outer border border (default).
• padding-box: the background image starts from the top left corner of the padding.
• 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

Next lesson: Deep understanding of Color in CSS

FAQ

What is Multiple Background?

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

What should you know about 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.

What should you know about multiple Background?

The div element has two overlapping backgrounds: