CSS background properties with example:

How to give Background color?

For background color we use background-color property.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    p{
        background-color:red;
    }
    #first_heading{
        background-color:#27ae60;
    }
    .last_heading{
        background-color:#2980b9;
    }
</style>
</head>
<body>

<h2 id="first_heading">Welcome to this website</h2>
<p>It is a free learning website</P>
<h3 class="last_heading">Thanks for choosing this website</h3>

</body>
</html>

CSS background image properties:

The background properties:
background-image:url(location/image name.extension); To give background image this property is used. Pss the url or location
,name and extension of image as value. If image and the html file is in
same location then don't need to give image path.

background-repeat:six predefine values;
This property is used to control the repetition of background image.
The values are:
background-repeat:repeat;
It is the default value. It means we want repetition of the image.
background-repeat:no-repeat;
It means that we don't want repetition of image
background-repeat:repeat-x;
It means that we want repetition of image only in x-axis
background-repeat:repeat-y;
It means that we want repetition of image only in y-axis
background-repeat:space;
It means that we want repetition and also want space between images.
background-repeat:round;
Round property stretches the image;

background-position:predefine values or pixel, percent;
This property is used to set background image position.
The values are:
left top,left center, left bottom, right top, right center,
right bottom, center top, center center,center bottom. x% y%, xpx ypx.

background-attachment: scroll(default) or fixed;
background-attachment:fixed;
It means that when we scroll the page, the background image will not goes up or down. It's position will be fixed. It won't hide
for scrolling.

background-size:predefine values and pixel or percent;
This property is used to set image background size.
The values are:
background-size:px;
If we pass one value then it will count for both
x and y axis. If we pass two value then first value will
count for x axis(width ) second value is for y axis(height).
background-size:percent;
If we pass one value then it will count for both
x and y axis. If we pass two value then first value will
count for x axis(width ) second value is for y axis(height).
background-size:auto(default);
background-size:cover;
Cover means it will take total height and width of the element.
background-size:contain;
Contain means it tries to take possible maximum height and width
of the element.

background-origin: three predefine values;
This property is used to define that where the background image
position should start start.
The values are:
background-origin:padding-box(default);
background-origin:border-box;
border-box means the background image position
will start form beginning of the box border.
background-origin:content-box;
content-box means the background image position
will start from beginning of the box content.

background-clip:predefine values;
This property is used to define that inside a div or box from where the background color or image
will start. In short we can say that starting position of background color and image inside a box.
background-clip:padding-box;
content-box means the background color position
will start from beginning of the padding.
background-clip:border-box;
content-box means the background color position
will start from beginning of the box content.
background-clip:content-box;
content-box means the background color position
will start form beginning of the box content.
opacity:value 0.0-1.0; This property is used to give transparent look.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    body{
        background-image:url("my_image_4.jpg");
        background-repeat:no-repeat;
        background-position: 80% 90%;
        background-attachment:fixed;
        background-size:cover;
        background-color:#2980b9;
    }
    p{
        background-image:url("my_image_1.jpg");
        background-origin:border-box;
        opacity:0.5;
    }
    #first_heading{
        background-image:ulr("image/my_image_2.jpg");
        background-repeat:no-repeat;
        background-position: 50% 70%;
    }
    .last_heading{
        background-image:ulr("image/my_image_2.jpg");
        background-color:#2980b9;
        background-repeat:repeat-y;
        background-position: center bottom;
    }
</style>
</head>
<body>

<h2 id="first_heading">Welcome to this website</h2>
<p>It is afree learning website</P>
<h3 class="last_heading">Thanks for choosing this website</h3>

</body>
</html>

CSS background gradient ,background blend mode,mix blend mode

This property is used to give multiple background color.
This property has four values:
background:linear-gradient(value direction name or degree,colors name);
The color effect starts from one side then moves
to other side. We can use degree or direction name like to bottom,
to left, to bottom left, to top right, etc for color effect direction
background:redial-gradient(value direction in degree, colors name);
The color effect starts from center or a particular point. We can use
degree or direction name like to bottom,to left,
to bottom left, to top right etc for color effect direction
background:repeating-linear-gradient(value direction name or degree,colors name);
We can use
degree or direction name like to bottom,to left,
to bottom left, to top right etc for color effect direction.
background:repeating-radical-gradients:(value direction in degree,colors name);
We can use degree for direction .

background-blend-mode:predefine values;
If we have two images or image and color in the background then we can
show various and some beautiful effects with both color and
image.To do this we use background-blend-mode.
The values are:
normal,multiply,scree,overlay,darken,lighten,color-dodge,
color-burn,hard-light,soft-light,difference,exclusion,hue,
color,saturation,luminosity.

mix-blend-mode:predefine values;
The values are:
normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,
hard-light,soft-light,difference,exclusion,hue,color,saturation,luminosity.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    .last_heading{
        border:solid 5px red;
        background:linear-gradient(to left, red,green);
    }
    p{
        border:solid 5px blue;
        background:repeating-linear-gradient(to bottom, red,green20%,gray14%);
    }
    #first_heading{
        border:solid 5px blue;
        background:redial-gradient(90deg, red,green,white);
    }
    h4{
        border:solid 5px blue;
        background:repeating-redial-gradient(45deg, red,green20%,gray14%);
    }
    #last_heading_2{
        border:solid 5px blue;
        background-image:linear-gradient(to right,red,yellow,),url("my_pic.jpg");
        background-blend-mode:screen;
    }
    #last_heading_3{
        background-color:blue;
        text-align:center;
        margin-top:45px;
        mix-blend-mode:screen;
    }
    #main_div{
        background-image:url("jj.jpg");
    }
</style>
</head>
<body>

<h2 id="first_heading">Welcome to this website</h2>
<p>It is a free learning website</P>
<h4>It is a free learning website</h4>
<h3 class="last_heading">Thanks for choosing this website</h3>
<h3 id="last_heading_2">Thanks for choosing this website</h3>
<div id="main_div">
    <h3 id="last_heading_3">Thanks for choosing this website</h3>
</div>

</body>
</html>

CSS background attachment property

This property is used to specifies whether the background image should scroll or be fixed.

Value:
background-attachment: fixed;
If you use fixed then the background image will be fixed.
background-attachment: scroll;
If you use scroll then the background image will not fixed.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    body{
        background-image: url("my_img.png");
        background-repeat: no-repeat;
        background-position: left top;
        background-attachment: scroll;
    }
    .last_heading{
        color:red;
    }
</style>
</head>
<body>

<h2 id="first_heading">Welcome to this website</h2>

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us