Describe CSS Background Properties

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:

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);

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.

For more about CSS Background properties continue reading...

Recommended:

• Learn About CSS Background Properties

• Learn about Text Styling in CSS

• CSS Shorthand Properties- Useful CSS Shorthand

For more exciting tips and tricks about programming and coding please read our others articles

Find My page on Instagram: @stack.content

Find Me on Twitter: @mrezaulkarim_