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…

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Next

Download Free Graphics Design Software: Learning graphic design can be considered as a great career at the present time. However, in order...
Continue Reading
Today we are going to discuss what is the difference between primitive and reference type data in JavaScript and how these data types...
Continue Reading
What is a firewall and how does it works? Why is firewall used and what are its types? Importance of it on your... (discuss in details).
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!