CSS Background

 CSS-background

CSS Background 

css background | how to change html page background | css background properties | how to set image in html background


CSS background is very important and useful property to develop a webpage. A webpage without beautiful background is not looks so good. CSS background property change the attraction of your webpage completely.

Here we are going to cover CSS background properties mentioned below:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-size
  • background-clip
So today we are going to start with CSS Background properties. In CSS you can change the background color or place an image as background as well. So in this article, we will discuss about CSS background property with practical. So lets started:

we can set background to our document by using below code:
sample:
 body{
background-color : #000000;
}

or to set a image:

body{
background-image: url(“sampleimage.png”);
}

to know much more about CSS-Color check our CSS Colors article.

Not even page body we can set the background to other elements also i.e. div, box, form etc.

background-color:

if you want to give a color to your background i.e. background of document body or any container or div etc, we use background-color property.
Example:
body{
background-color: “green”;
}

background-image:

when you want’s to use an image instead of color as background of your element or body, use background-image property.
Example: 
body{
background-image: url(“image.png”);
}

background-repeat:

This property is use to set your image or color to your document. Whether you want to use original image or you want to stretch it with the size of your element or you wanted to put it on center, background-repeat property can be use.
There are four values we can use in background-repeat property:
  • repeat
  • no-repeat
  • repeat-x
  • repeat-y
Example:
body{
background-image: url(“image.png”);
background-repeat: no-repeat/repeat;
}

background-attachment:

if you want to set your background fixed while scroll or it will be scroll during page scrolling, you need to set background-attachment.
You need to provide one of the below three mentioned values:
  • fixed
  • local
  • scroll
Example:

body{
background-image: url(“image.png”);
background-attachment: fixed;
}

background-position:

This will set initial position of each background-image. The position is relative to the position layer set by background-origin. You can set it to left/right/top/bottom or you can provide length percentage as well or in pixels.
You need to provide one of the three mentioned values:

  • left-top
  • left
  • left-bottom
  • top
  • center
  • bottom
  • right-top
  • right
  • right-bottom
Example:

body{
    background-image: url(“image.png”);
    background-position: center;
    }

background-size:

its one of the most use property of CSS. You can set the size of you background. It can be left to its natural size, stretched, or constrained to fit the available space.
There are two values you can pass here:
  • auto
  • cover
or you can provide background size in pixels also.
Example:

body{
background-image: url(“image.png”);
background-size: cover/300px 100px cover;
}

background-clip:

This property sets whether an element background extends underneath its border box, padding box or content box.
You can pass one of the three values mentioned below:
  • border-box
  • padding-box
  • content-box
  • inherit
Example:
div{
background-color: “red”;
background-clip: border-box;
}
So as described in above section we can apply background in our HTML document.

Lets understand above parts in a single example:

Here we are going to take a HTML page where we divide body in two sections. In first section we are going to give color and in second section we will provide a image and also we do for rest properties. So lets started:

Code

HTML:


<!DOCTYPE html>
<html>
<head>
<title>CSS-Background</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="section1">
<div class="div1">
Its First Section
</div>
</section>
<section class="section2">
<div class="div2">
Its Second Section
</div>
</section>
</body>
</html>

CSS:

section{
width: 100%;
height: 100vh;
}
.section1{
background-color: tomato;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.div1{
width: 500px;
height: 200px;
background-clip: padding-box;
background-color: darkgreen;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: Raleway;
color: #f6f6f6;
font-size: 50px;
}
.section2{
background-image: url("sample.jpg");
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.div2{
width: 500px;
height: 200px;
background-clip: border-box;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: Raleway;
color: #f6f6f6;
font-size: 50px;
}

Result

Section 1:

CSS Background


Section 2:

CSS Background

So you can see how we created a beautiful background with few code of HTML and CSS. You can make it much more attractive by keep practice of CSS background property.

Conclusion:

so we discussed about CSS background property what we learnt is:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-size
  • background-clip
how to apply above properties in HTML document and how to use them.
As well as we created a webpage to create CSS background more beautiful with image and color.


Hope your doubts are clear now about CSS background property and you can use the CSS background property now.
That's all about CSS background as of now.
Learn More:

Thank you

See you in next article.


7 Comments

  1. I have been following ur CSS series for some time now. This post is also as fruitful as the previous ones were. Commendable effort 👍

    ReplyDelete
  2. Undoubtedly excellent post it is.

    ReplyDelete
  3. Very nice explanation and good work 👍

    ReplyDelete
  4. Very well explained and it's helpful too...

    ReplyDelete
  5. Very well explained. Great and helpful article

    ReplyDelete