CSS Multiple Background

CSS Multiple Backgrounds

In this chapter you will learn how to add multiple background images to one element. You will also learn about the following properties:

  • background-size
  • background-origin
  • background-clip

CSS Multiple Backgrounds

CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>
"mystyle.css"
                 body {
                 background-color: lightblue;
                 }       
                 h1 {
                 color: navy;
                 margin-left: 20px;
                 }
</style>
</head>
<body>
<h1>this is a heading</h1>
<p>this is a paragraph</p>
</body>
</html>

    CSS Background Size

    The CSS background-size property allows you to specify the size of background images. The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>
"mystyle.css"
                 body {
                 background-color: lightblue;
                 }       
                 h1 {
                 color: navy;
                 margin-left: 20px;
                 }
</style>
</head>
<body>
<h1>this is a heading</h1>
<p>this is a paragraph</p>
</body>
</html>

    Define Sizes of Multiple Background Images

    The background-size property also accepts multiple values for background size (using a comma-separated list), when working with multiple backgrounds. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>
"mystyle.css"
                 body {
                 background-color: lightblue;
                 }       
                 h1 {
                 color: navy;
                 margin-left: 20px;
                 }
</style>
</head>
<body>
<h1>this is a heading</h1>
<p>this is a paragraph</p>
</body>
</html>

    Full Size Background Image

    Now we want to have a background image on a website that covers the entire browser window at all times. The requirements are as follows:

    Fill the entire page with the image (no white space)
    image as needed
    Center image on page
    not cause scrollbars

    The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property: 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>
"mystyle.css"
                 body {
                 background-color: lightblue;
                 }       
                 h1 {
                 color: navy;
                 margin-left: 20px;
                 }
</style>
</head>
<body>
<h1>this is a heading</h1>
<p>this is a paragraph</p>
</body>
</html>

    Hero Image

    You could also use different background properties on a div to create a hero image (a large image with text), and place it where you want. 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>
"mystyle.css"
                 body {
                 background-color: lightblue;
                 }       
                 h1 {
                 color: navy;
                 margin-left: 20px;
                 }
</style>
</head>
<body>
<h1>this is a heading</h1>
<p>this is a paragraph</p>
</body>
</html>

    CSS background-origin Property

    The CSS background-origin property specifies where the background image is positioned. The property takes three different values:

    • border-box - the background image starts from the upper left corner of the border
    • padding-box - (default) the background image starts from the upper left corner of the padding edge
    • content-box - the background image starts from the upper left corner of the content

    The following example illustrates the background-origin property: 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>
"mystyle.css"
                 body {
                 background-color: lightblue;
                 }       
                 h1 {
                 color: navy;
                 margin-left: 20px;
                 }
</style>
</head>
<body>
<h1>this is a heading</h1>
<p>this is a paragraph</p>
</body>
</html>

    CSS background-clip Property

    The CSS background-clip property specifies the painting area of the background. The property takes three different values:

    border-box: (default) the background is painted to the outside edge of the border

    padding-box: the background is painted to the outside edge of the padding

    content-box: the background is painted within the content box 

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>
"mystyle.css"
                 body {
                 background-color: lightblue;
                 }       
                 h1 {
                 color: navy;
                 margin-left: 20px;
                 }
</style>
</head>
<body>
<h1>this is a heading</h1>
<p>this is a paragraph</p>
</body>
</html>

    CSS Advanced Background Properties

    background A shorthand property for setting all the background properties in one declaration

    background-clip Specifies the painting area of the background

    background-image Specifies one or more background images for an element

    background-origin Specifies where the background image(s) is/are positioned

    background-size Specifies the size of the background image(s)

    Popular tags

    CSS Button CSS Gradient CSS Responsive CSS Transition CSS Gallery

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1