BACKGROUND PROPERTIES

CSS Background properties :

CSS background property is used to define the background effects on element. There are 5 CSS background properties that affects the HTML elements:

background-color
background-image
background-repeat
background-attachment
background-position

1. CSS background-color
The background-color property is used to specify the background color of the element. You can set the background color like this:

    < !DOCTYPE html >  
    < html >  
    < head >  
    < style >  
        h2,p{  
            background-color: #4154f1;  
        }   
    < /style >  
    < /head >  
    < body >  
        < h2 >This is CSS page...< /h2 >  
        < p >Hello TesDBAcademy...This is an example of CSS background-color.< /p >
    < /body >  
    < /html >

Output :

My first CSS page.

Hello TesDBAcademy...This is an example of CSS background-color.

2. CSS background-image
The background-image property is used to set an image as a background of an element. By default the image covers the entire element.You can set the background image for a page like this.

    < !DOCTYPE html >  
    < html >  
    < head >  
    < style >  
        body {  
            background-image: url("paper1.gif");  
            margin-left:100px;  
        }   
    < /style >  
    < /head >  
    < body >  
        < h1 >This is CSS background image page...< /h1 >  
    < /body >  
    < /html >

Note : The background image should be chosen according to text color. The bad combination of text and background image may be a cause of poor designed and not readable webpage.

3. CSS background-repeat
By default, the background-image property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically. The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

    < !DOCTYPE html >  
    < html >  
    < head >  
    < style >  
        body {  
            background-image: url("image1.png");  
            background-repeat: repeat-x;  
        }     
    < /style >  
    < /head >  
    < body >  
        < h1 >This is CSS background repeat of x...< /h1 >  
    < /body >  
    < /html >

background-repeat: repeat-y;

    < !DOCTYPE html >  
    < html >  
    < head >  
    < style >  
        body {  
        background-image: url("image1.png");  
        background-repeat: repeat-y;  
        }      
    < /style >  
    < /head >  
    < body >  
        < h1 >This is CSS background repeat of y...< /h1 >  
    < /body >  
    < /html >

4. CSS background-attachment
The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window. If you set fixed the background image then the image will not move during scrolling in the browser. Let's take an example with fixed background image.

    background: white url("image1.png");  
    background-repeat: no-repeat;  
    background-attachment: fixed;

Eg:

    < !DOCTYPE html>
    < html>
    < head>
    < title>background-attachment property
    < style>
        #example {
            background-image:  url("https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white
            /jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg");
            font-size: 25px;
            border: 2px solid blue;
            width:900px;
            height:300px;
            color: black;
            background-position: center;	
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    < /style>
    < /head>
    < body>
        < h1> background-attachment: fixed;< /h1>
        < p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. < /p>
        < div id="example">
        < p> The TesDBacademy is always providing an easy and in-depth tutorial on various technologies. 
            No one is perfect in this world, and nothing is eternally best. But we can try to be better...  < /p>
        < p> The TesDBacademy is always providing an easy and in-depth tutorial on various technologies. 
        No one is perfect in this world, and nothing is eternally best. But we can try to be better...  < /p>
        < p> The TesDBacademy is always providing an easy and in-depth tutorial on various technologies. 
        No one is perfect in this world, and nothing is eternally best. But we can try to be better...  < /p>
    < /div>
    < /body>
    < /html>

Output :

background-attachment: fixed;

If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. < /p>

The TesDBacademy is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better...

Note : This page is underscore scroll option so you can see the image is fixed in it's original position and content gets scroll.

5. CSS background-position
The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage. You can set the following positions:

center
top
bottom
left
right

Let's take an example with background position.

    background: white url("image1.png");  
    background-repeat: no-repeat;  
    background-attachment: fixed;  
    background-position: center;

Eg:

    < !DOCTYPE html>
    < html>
    < head>
    < style>
        body  {
            width:900px;
            height:300px;
            border:2px solid blue;
            background: white url('good-morning.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;   
        }
    < /style>
    < /head>
    < body>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>This is a fixed background-image. Scroll down the page.< /p>
    < p>If you do not see any scrollbars, Resize the browser window.< /p>
    < /body>
    < /html>

Output :

This is a fixed background-image. Scroll down the page.

If you do not see any scrollbars, Resize the browser window.

Note : This page is underscore scroll option so you can see the image is fixed in it's original position and content gets scroll.

CSS Background-color
This property is used to set the background color of an element. The background of an element covers the total size, including the padding and border and excluding margin. It can be applied to all HTML elements.
Syntax :

        element {  
            background-color: color_name|transparent|initial|inherit;  
        }

Let's discuss the possible values of this property.

color_name: It is used for defining the background color value or the color codes. It can be given by using the color name, hexadecimal value, or rgb() value.

transparent: It is the default value of this property, which is used to specify the transparent background-color.

initial: It is not used to set the background color. It sets the default value.

Inherit: It is used to inherit the background-color from its parent.

Eg:

    < !DOCTYPE html>   
    < html>   
    < head>   
    < title>background-color property< /title>   
    < style>    
        body {text-align:center;background-color: #ddd;}
        h1{color: blue;}  
    < /style>    
    < /head>   
    < body>    
        < h1>Hello World.< /h1>  
        < h1>Welcome to the TesDBacademy< /h1>    
    < /body>    
    < /html>

Output :

Hello World.

Welcome to the TesDBacademy

CSS background-attachment property :
The background-attachment property is used to specify that the background image is fixed or scroll with the rest of the page in the browser window.

This property has three values scroll, fixed, and local. Its default value is scroll, which causes the element to not scroll with its content. The local value of this property causes the element to scroll with the content. If we set the value to fixed, the background image will not move during scrolling in the browser.

This CSS property can support multiple background images. We can specify a different value of the background-attachment property for each background-image, separated by commas. Every image will match with the corresponding value of this property.
Syntax:

    background-attachment: scroll | fixed | local | initial | inherit;

Property Values :

scroll : It is the default value that prevents the element from scrolling with the contents, but scrolls with the page.

fixed :Using this value, the background image doesn't move with the element, even the element has a scrolling mechanism. It causes the image to be locked in one place, even the rest of the document scrolls.

initial :It sets the property to its default value.

inherit :It inherits the property from its parent element.

Example In this example, we are using the scroll value of the background-attachment property, which is the default behavior. So when the page is scrolled, the background scrolls with it

    < !DOCTYPE html>  
    < html>  
    < head>  
    < title>background-attachment property< /title>  
    < style>  
        #example {  
            background-image:  url("photo.png");  
            font-size: 35px;  
            border: 4px solid red;  
            color: white;  
            background-position: center;  
            background-color: green;      
            background-repeat: no-repeat;  
            background-attachment: scroll;  
        }  
    < /style>  
    < /head>  
    < body>  
        < h1> background-attachment: scroll;< /h1>  
        < p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect.< /p>  
        < div id="example">  
        < p>Hi, Welcome to the TesDBacademy.The TesDBacademy is always providing an easy and in-depth tutorial on 
        various technologies. TesDBacademy will make you understand in a easy way to understand the knowledge.Now we are going to see
        the example of background-attachment property. It is the default value that prevents the element from scrolling with the contents, 
        but scrolls with the page. 
        < /p>< /div>  
    < /body>  
    < /html>

Output :

background-attachment: scroll;

If there is no scrollbar on your screen, then try to resize the browser's window to see the effect.

Hi, Welcome to the TesDBacademy.The TesDBacademy is always providing an easy and in-depth tutorial on various technologies. TesDBacademy will make you understand in a easy way to understand the knowledge.Now we are going to see the example of background-attachment property. It is the default value that prevents the element from scrolling with the contents, but scrolls with the page.

Example - Using fixed value
In this example, we are using the fixed value of the background-attachment property. This value fixed the background image, and the image will not move even the rest of the document scrolls.

    < !DOCTYPE html>  
    < html>  
    < head>  
    < title>background-attachment property< /title>  
    < style>  
        #example {  
            background-image:  url("photo.png");  
            font-size: 25px;  
            border: 3px solid red;  
            color: white;  
            background-position: center;  
            background-color: green;      
            background-repeat: no-repeat;  
            background-attachment: fixed;  
        }  
    < /style>  
    < /head>  
    < body>  
        < h1> background-attachment: fixed;< /h1>  
        < p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. < /p>  
        < div id="example">  
        < p>Hi, Welcome to the TesDBacademy.The TesDBacademy is always providing an easy and in-depth tutorial on 
            various technologies. TesDBacademy will make you understand in a easy way to understand the knowledge.Now   
            we are going to see the example of background-attachment property of fixed.< /p>< /div>  
    < /body>  
    < /html>

Output :

background-attachment: fixed;

If there is no scrollbar on your screen, then try to resize the browser's window to see the effect.

CSS background-size property
The background-size CSS property is used to set the size of a background image of an element. The background image can be stretched or constrained to fit into the existing space. It allows us to control the scaling of the background image.

This property can be defined using length, percentage, or keyword values. It has two possible keyword values that are contain and cover. Its single-value syntax defines the width of the image (in this case, the height sets to auto), whereas the double values define the value of both height and width in which the first value sets the width and second sets the height.

If an element has multiple background images, we can define the comma-separated values to define the different sizes of each one. The cover value of the background-size property is used to cover the entire background area of the element. In contrast, the contain value of this property scales the image as much as possible without clipping the image.

Syntax :

    background-size: auto | length | cover | contain | initial | inherit;

Property Values

auto: This is the default value, which displays the background image in its original size.

length: It is used to set the width and height of the background image. This value stretches the image in the corresponding dimension of the given length. Its single value specifies the width of the image, and the height sets to auto. If two values are given, the first value sets the width, and the second value sets the height. It does not allow negative values.

percentage: This value defines the width and height of the background image to the percentage (%) of the background positioning area. Negative values are not allowed.

cover: This value is used to resize the background image to cover the entire container. Sometimes, it crops the little bit off one of the edges or stretches the image. It resizes the image to ensure the element is completely covered.

contain: Without stretching or cropping, it resizes the background image to ensure the image is completely visible.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Example :
In this example, there are three div elements with a width of 300px and a height of 200px. Every div element has a background-image on which we are applying the background-size property.

    < !DOCTYPE html>  
    < html>  
    < head>  
    < title>background-size property< /title>  
    < style>  
        div { width: 300px; height: 200px; border: 2px solid red; }  
        #div1{ background-image: url('photo.png'); background-size: auto; }  
        #div2{ background-image: url('photo.png'); background-size: 150px 150px; }  
        #div3{ background-image: url('photo.png'); background-size: 30%; }  
    < /style>  
    < /head>  
    < body>  
        < h2> background-size: auto; < /h2>  
        < div id = "div1">< /div>  
        < h2> background-size: 150px 150px; < /h2>  
        < div id = "div2">< /div>  
        < h2> background-size: 30%; < /h2>  
        < div id = "div3">< /div>  
    < /body>  
    < /html>

Output :
css-11

Now, in the next example, we are using the cover, contain, and initial values of the background-size property.
Example :

    < !DOCTYPE html>  
    < html>  
    < head>  
    < title>background-size property< /title>  
    < style>  
        div {  
            width: 300px;  
            height: 250px;  
            border: 2px solid red;  
            background-repeat: no-repeat;  
        }  
        #div1{  
            background-image: url('lion.png');  
            background-size: contain;  
        }  
        #div2{  
            background-image: url('lion.png');  
            background-size: cover;  
        }  
        #div3{  
            background-image: url('lion.png');  
            background-size: initial;  
        }  
    < /style>  
    < /head>  
    < body>  
        < h2> background-size: contain; < /h2>  
        < div id = "div1">< /div>  
        < h2> background-size: cover; < /h2>  
        < div id = "div2">< /div>  
        < h2> background-size: initial; < /h2>  
        < div id = "div3">< /div>  
    < /body>  
    < /html>

Output :
css-12

Example - Combining multiple images
We can also combine the values of this property and can apply them to multiple images. It can be done by comma-separated syntax.
In this example, there are three div elements, each having two background-images. Now, we are applying the background-size property on both images.

    < !DOCTYPE html>  
    < html>  
    < head>  
    < title>background-size property< /title>  
    < style>  
        div {  
            width: 250px;  
            height: 250px;  
            border: 2px solid red;  
            background-repeat: no-repeat;  
            background-position: center;  
        }  
        #div1{  
            background-image: url('photo.png'), url('tree.jpg');  
            background-size: 300px 150px, cover;  
        }  
        #div2{  
            background-image: url('photo.png'), url('tree.jpg');  
            background-size: 200px 150px, 300px 200px;  
        }  
        #div3{  
            background-image: url('photo.png'), url('tree.jpg');  
            background-size: 150px 175px, contain;  
        }  
    < /style>  
    < /head>  
    < body>  
        < h2> background-size: 300px 150px, cover; < /h2>  
        < div id = "div1">< /div>  
        < h2> background-size: 200px 150px, 300px 200px; < /h2>  
        < div id = "div2">< /div>  
        < h2> background-size: 150px 175px, contain; < /h2>  
        < div id = "div3">< /div>  
    < /body>  
    < /html>

Output :
css-13

« Previous Next Topic » (CSS - Border Properties)