Learn About CSS Background Properties

Home » Blog » CSS » Learn About CSS Background Properties
css-background

CSS Background Properties

We regularly see that the back of a website is the different color. Some websites also have images on the back. Somewhere again there is more than one image. Some of these are set with CSS Background Properties. CSS Background is used to set a color or an image behind an entire web page or a specific HTML element or a small part of an element. We can use the following style rules to give CSS Background Properties which are mostly used.

  • background-color: Used to give a specific color.

  • background-image: Used to give one or more images.

  • background-repeat: The rule is written whether to repeat the image file or not.

  • background-attachment: The rule is written whether the image used in the background will scroll or stay in a certain place.

  • background-position: The rule is where the position of the image will be written.

I will try to give examples of all these on one page. Let’s start with background-color. background-color is the color of the back of an element. And it is written like this:

Recommended: Learn about Text Styling in CSS

background-color:

h1{
 
background-color:red;
 
}

Color code can also be used instead of color name. If you go here, you will find the names and codes of HTML color.

h1{
 
background-color:#808080;
 
}

background-image:

background-image: background-image Sets an image behind the HTML element. Here we will set an image in the background of our entire site with background-image. For that we will write:

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

You have to set where the image is in brackets with url. So we did above. If the image and the html file are in the same folder, then just enter the name of the image. E.g. background-image: url (highway.jpg);

Recommended: CSS Shorthand Properties- Useful CSS Shorthand

Now let’s come to background-repeat:

If our image is much smaller than our web page, then it can be seen that the image is shown again and again. We can turn it off if we want.

body {

background-image: url(background.png);
 
background-repeat:no-repeat;
 
}

★ No-repeat will show the image only once.

We can repeat a direction such as x axis or y axis if we want. For example background-repeat: repeat-x will repeat the x axis. background-repeat: If you repeat-y, the y axis will repeat.

background- position:

The position of the image is set with background-position. For example, if background-position: center is given, the image will be in the middle of the web page. background-position: top will be at the top. background-position: left background-position: write right. Again background-position: top left; Writing will show up and on the left side. Similarly background-position: top center; Writing shows the top and the middle of the two sides.

body {
 
background-image: url(background.png);
 
background-repeat:no-repeat;
 
background-position:top center;
 
}

Recommended: Download free HTML CSS Templates with source code for practice

background-attachment:

background-attachment: With background-attachment, it is decided whether the image will remain in one place or it will move up and down as the content is scrolled. The default value for background-attachment is scroll. background-attachment: fixed; Let’s see what happens. Again with background-attachment: scroll to see what happens.

body {
 
background-image: url(background.png);
 
background-repeat:no-repeat;
 
background-position:top center;

background-attachment:fixed
 
}

Conclusion

There are some more rules about CSS Background Properties. But these are the most uses and needed on background properties. Hope you guys enjoy this article specially for beginners.

Find it helpful? Please share with your friends and Read my others article about coding and programming, Tips, Productivity , Resources etc…

Read Next

JavaScript ES6 Cheat Sheet with example. ES6 is the latest standard specification of JavaScript.Here's a cheatsheet to show you...
Continue Reading
Download Free PSD to HTML with source code. Are you a absolute beginners or in intermediate level? Grow up your skills with practice...
Continue Reading
CSS Shorthand properties are properties that let you set the values of multiple other CSS properties simultaneously. Using CSS...
Continue Reading
Git is the free and open source distributed version control system that's responsible for everything GitHub related. This git cheat sheet...
Continue Reading
Implicit type coercion in JavaScript is automatic conversion of value from one data type to another. It takes place ...
Continue Reading
A responsive website design responds to the device it is being viewed on, whether a desktop computer, laptop, tablet, or smartphone.
Continue Reading

Reach Out to me!

Discuss a project or just want to say hi? My Inbox is open for all.

"Client satisfaction is the key to me.Always try to provide the best possible services to my clients in every steps."

Narayanganj , Bangladesh
Open for opportunities: Yes!