CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

Multiple Backgrounds
In CSS, you can use multiple background images for an element. First background should be layered on top, and the last background should be layered behind. Only the last background can have a background color.
Syntax
.multibackgrounds {
   background:
      background1,
      background2,
      /* …, */ backgroundN;
}
You can use shorthand and individual background properties, excluding background-color.
The following background properties can be provided as a list, one for each background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
CSS Multiple Backgrounds - Using background-image property
The following example demonstrates adding two background images using background-image property, where the first image is stacked on top and the second is behind it 
<html>
<head>
<style>
   .multibackgrounds {
      background-image: url(images/logo.png), url(images/see.jpg);
      background-position: left top, right top;
      background-repeat: no-repeat, repeat;
      padding: 70px;
   }
</style>
</head>
<body>
   <div class="multibackgrounds">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
   </div>
</body>
</html>
CSS Multiple Backgrounds - Using background-size Property
The following example demonstrates the use of multiple background images of different sizes using background-size property. The first image's size is 150px, and the second image's size is 300px 
<html>
<head>
<style>
   .multibackgrounds{
      background-image: url(images/logo.png), url(images/see.jpg);
      background-position: left top, right top;
      background-repeat: no-repeat, repeat;
      padding: 70px;
   }
   .multibackgrounds-size {
      background-image: url(images/logo.png), url(images/see.jpg);
      background-position: left top, right top;
      background-repeat: no-repeat, repeat;
      background-size: 150px, 300px;
      padding: 70px;
   }
</style>
</head>
<body>
      <h3>Without Sizing</h3>
   <div class="multibackgrounds">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
   </div><br>
   <h3>With Sizing</h3>
   <div class="multibackgrounds-size">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
   </div>
</body>
</html>
CSS Multiple Backgrounds - Using background Property
The following example demonstrates addition of three background images using the shorthand property background 
<html>
<head>
<style>
   .multibackgrounds-size {
      background: url(images/logo.png),  url(images/pink-flower.jpg), url(images/see.jpg);
      background-position: left top, center, right top;
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size: 150px, 100px, 550px;
      padding: 70px;
      color: yellow;
   }
</style>
</head>
<body>
   <div class="multibackgrounds-size">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
   </div>
</body>
</html>
CSS Multiple Backgrounds - Full Size Image
The following example demonstrates full sized background image, set using background-size: cover property 
<html>
<head>
<style> 
   html { 
      background: url(images/red-flower.jpg) no-repeat center fixed; 
      background-size: cover;
      color: yellow; 
   }
</style>
</head>
<body>
   <h1>Red Flower Image</h1>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
CSS Multiple Backgrounds - Hero Image
The following example demonstrates the setting of a hero image, refers to a large image with text using different background properties on <div> 
<html>
<head>
<style>
   .background-img {
      background: url(images/see.jpg) no-repeat center; 
      background-size: cover;
      height: 300px;
      position: relative;
   }
   .background-text {
      text-align: center;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: red;
   }
   button {
         background-color: yellow;
         padding: 10px;
   }
</style>
</head>
<body>
   <div class="background-img">
      <div class="background-text">
         <h1>See Image</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
         <button>Click Me</button>
      </div>
   </div>
</body>
</html>
CSS Multiple Backgrounds - Using background-origin Property
The following example demonstrates how the background image is positioned within a box using background-origin property 
<html>
<head>
<style>
   div {
      width: 200px;
      height: 150px;
      border: 7px solid blue;
      padding: 30px;
      background: url(images/pink-flower.jpg);
      background-repeat: no-repeat;
      margin: 10px;
   }
   P {
      color: yellow;
   }
   h3 {
      color: red;
   }
   .box1 {
      background-origin: padding-box;
   }
   .box2 {
      background-origin: border-box;
   }
   .box3 {
      background-origin: content-box;
   }
</style>
</head>
<body>
   <div class="box1">
      <h3>background-origin: padding-box</h3>
      <p>Background image is positioned relative to the padding box.</p>
   </div>
   <div class="box2">
      <h3>background-origin: border-box</h3>
      <p>Background image is positioned relative to the border box.</p>
   </div>
   <div class="box3">
      <h3>background-origin: content-box</h3>
      <p>Background image is positioned relative to the content box.</p>
   </div>
</body>
</html>
CSS Multiple Backgrounds - Using background-clip Property
The following example demonstrates how the background image should be displayed within box using background-clip property 
<html>
<head>
<style>  
   p {
      width: 200px;
      height: 150px;
      border: 8px solid blue;
      margin: 10px;
      padding: 30px;
      color: yellow;
      background: url(images/pink-flower.jpg);
   }
   .box1 {
      background-clip: border-box;
   }
   .box2 {
      background-clip: padding-box;
   }
   .box3 {
      background-clip: content-box;
   }
</style>
</head>
<body>
   <p class="box1">Background image is applied to the entire element.</p>
   <p class="box2">Background image is applied to the padding area.</p>
   <p class="box3">Background image is applied only to the content area.</p>
</body>
</html>
CSS Multiple Backgrounds - Related Properties
All the properties related to background are listed in the table below:
Properties
Description
﻿background﻿
Shorthand for background related properties.
﻿background-attachment﻿
Specifies the position of the background relative to the viewport, either fixed or scrollable.
﻿background-clip﻿
Controls how far a background image extends beyond the element's padding or content box.
﻿background-image﻿
Sets one or more background image(s) on an element.
﻿background-origin﻿
Sets the origin of the background.
﻿background-position﻿
Sets the initial position of each image in a background.
﻿background-repeat﻿
Controls the repetition of an image in the background.
﻿background-size﻿
Controls the size of the background image.
﻿
﻿
﻿
﻿
﻿
﻿

Properties	Description
background	Shorthand for background related properties.
background-attachment	Specifies the position of the background relative to the viewport, either fixed or scrollable.
background-clip	Controls how far a background image extends beyond the element's padding or content box.
background-image	Sets one or more background image(s) on an element.
background-origin	Sets the origin of the background.
background-position	Sets the initial position of each image in a background.
background-repeat	Controls the repetition of an image in the background.
background-size	Controls the size of the background image.

CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

Multiple Backgrounds

Syntax

CSS Multiple Backgrounds - Using background-image property

CSS Multiple Backgrounds - Using background-size Property

CSS Multiple Backgrounds - Using background Property

CSS Multiple Backgrounds - Full Size Image

CSS Multiple Backgrounds - Hero Image

CSS Multiple Backgrounds - Using background-origin Property

CSS Multiple Backgrounds - Using background-clip Property

CSS Multiple Backgrounds - Related Properties