CSS Background Property Information
In this post, you will learn about CSS Background properties. You will know what CSS Background Properties are? How to set CSS Background?
Introduction to CSS Background
CSS Background Property is used to set background in web pages. CSS also provides us with many additional background properties to control the background.
Usually, the background is defined in the body element. Which gets applied on our entire webpage. If you want, you can also set the background for any particular element.
You can create any background as per your choice. You can set Color Background if you want. Or you can also set Image Background. Both of these are being told below.
Setting Background Color
The background-color property of CSS is used to set a color background for your HTML document. And the color is defined in its value.
You can define the Color Value in any way. If you want, define the color name, or write the Hex value of the color, or you can also set it to RGB value. Here we have talked about CSS Color in detail. You can oin the best web design institute in Delhi and become an expert web designer…
Try this
<!DOCTYPE html>
<html>
<head>
<title>CSS Color Background</title><style>p {
background-color: orange;
,
</style>
</head>
<body>
<h1>
This is Heading.
</h1>
<p>
This is Paragraph. You Can Write Your Content Here.
</p>
</body>
</html>
The above code will give you this result. We have here a Background Color Set which is only for Paragraph Elements.
Setting Background Image
You can also make a particular image as a background like Color Background.
The property of CSS is used to set the image background. This Image URL will be defined in its value.
Try this
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Background</title><style>body {
background-image: url(‘nextgeducation.com-logo.png’);
,
</style>
</head>
<body>
<h1>
This is Image Background.
</h1>
<p>
This paragraph text has an image behind it.
</p>
</body>
</html>
The code written above will give you a result like this.
CSS also provides Extra Properties to control Image Background. By which you can control the image background according to you. These Extra Properties are being told below.
Repeating Background Image
If your image size is small. So it will not cover the whole background. Your image should cover the whole background. The background-repeat property is used for this. It can have four possible values.
- repeat – By this value, your background will be repeated equally on both sides Vertically (Vertical) and Horizontally (Ad).
- no-repeat – By this value, the background image will not be repeated on any side.
- repeat-x – With this value, the background image will repeat horizontally.
- repeat-y – With this value, the background image will repeat vertically.
Try this
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Background</title><style>body {
background-image: url(‘cherry-image.png’);
background-repeat: repeat-x;
,
</style>
</head>
<body>
<h1>
This is Image Background.
</h1>
<p>
This paragraph text has an image behind it.
</p>
</body>
</html>
The above code will give you this result. In this, you can see that the background images are repeating horizontally. You can apply other properties in the same way.
If you do not want to write any particular property, then the default setting is applied in its place. And their sequence remains correct.
Setting the position of the background image
Background can affect your content. Therefore it is necessary to manually control the position of the background image.
If you want to control the position of the background image then use the background-position property. When you set it manually, its position is top-left which is by default background image, so the first value in it defines the distance from the left side. And the second value defines the distance from the top.
Try it
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Background</title><style>body {
background-image: url(‘cherry-image.png’);
background-position: 100px 100px;
,
</style>
</head>
<body>
<h1>
This is Image Background.
</h1>
<p>
This paragraph text has an image behind it.
</p>
</body>
</html>
The above code will give you this result. We have set the position of the background image accordingly. You can set Background Images anywhere as per requirement.
Scroll Setting of Background Image
If you want, you can also set the scroll setting of the background image… The background-attachment property is used for this. It has two possible values.
Fixed – The background image also moves up and down with this value whenever you scroll the page up or down…
The background image remains in one place with scroll – and scroll values.
Try This
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Background</title><style>body {
background-image: url(‘cherry-image.png’);
background-attachment: scroll;
,
</style>
</head>
<body>
<h1>
This is the Image Background.
</h1>
<p>
This paragraph text has an image behind it.
</p>
</body>
</html>
Shorthand Background Property
By now you have learned about many properties of CSS background. We were defining all these properties separately. But, you can also define all these properties together. We also call it the Shorthand Method. If you want to become an expert in this field then join an web development institute near your location and do practice…
When you set Background Image with the Shorthand Method, their order is already fixed. Which are as follows.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
If you want to know about How to Create an HTML Document? then visit the link…
What have you learned?
In this post, we have given you complete information about CSS Background Property. You have also learned in detail about Color Background and Image Background in this post. We hope you liked this post.
