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
body{
background-image: url(“image.png”);
background-position: center;
}
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:
Section 2:
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.
I have been following ur CSS series for some time now. This post is also as fruitful as the previous ones were. Commendable effort 👍
ReplyDeleteUndoubtedly excellent post it is.
ReplyDeleteVery nice explanation and good work 👍
ReplyDeleteVery well explained and it's helpful too...
ReplyDeleteVery well explained. Great and helpful article
ReplyDeleteWell written and explained 👍
ReplyDeleteVery nicely explained CCS
ReplyDelete