Chapter 15 - What is Background in CSS?

Like other elements, you can format background of any element with the help of style sheet. CSS has enhanced features than HTML to set background of an element.

You can set background of an element in 3 different ways of your choice or page requirement.

An element can have following three attributes:-

1. Background Color
2. Background Image 
3. Background Color + Image (both)

When you use 2nd and 3rd attribute, further these have 3 common attributes to set background position, attachment, and background repeat:-

1. Background Attachment
2. Background Position
3. Background Repeat

How to set Background property with css coding?

Now let us discuss all the attributes of Background with an example of each:-

Background-Color

If you want to set color for your HTML page or any other element created on the page, you can use this attribute to set the color.

Example for setting Background Color:-

 /*Syntax of Background Color in CSS*/

 height:200px;
 width:200px;
 background-color:red;
 

Above example will create a square box of 200px height and 200px width with Background color as RED.

Background color has 4 values:-

1. Color Name  (red, green blue etc)
   
2. Hexadecimal Number  (#ff33ea, #123456,...etc)
   
3. RGB color code - rgb(123,0,255)
4. Transparent

Background-Image

If you want to set an image for your HTML page or any other element created on the page, you can use this attribute to set the image. 

The css code is quite similar to the background color attribute but the attribute and values are different.

Example for setting Background Image:-

 /*Syntax of Background Image in CSS*/

 height:200px;
 width:200px;
 background-image:url('myimage.jpg');
 

Above example will create a square box of 200px height and 200px width with Background image.

Background Image has 2 values:-

1. url - (Path where your image is stored)
2. none

Background Color + Image

Sometime it happens that your image load time increased and it shows an empty image area. This is not good for a website or blog.

To handle this situation, we suggest you to use this property of background image with color.

Example, setting Background Image with color:-

 /*Syntax of Background Image with color in CSS*/

 height:200px;
 width:200px;
 background:#ff2354 url('myimage.jpg');
 

Above example will create a square box of 200px height and 200px width with Background image.

But if your image is not loading then it will show you the color you set with the url of your image.

Background Attachment

You can control the attachment of background image in style sheet. This is quite easy and a good practice to handle an image.

This property has 2 values to use with the image. If you want to scroll the image with the page or if you want to fix the image to some point on the page.

1. Fixed - It will fix the image and will not allow image to scroll with the page.
2. Scroll - It will scroll the image with page scroll

Example for setting Background Attachment:-

 /*Syntax of Background Attachment in CSS*/

 background-attachment:value;
 

Background Position

You can control the background position of your HTML element with the help of CSS (stylesheet). If you want to position an element, then you can do this by using background-position property of style sheet.

It has following 11 values to use for setting up the background position of an element.

1. top left 
2. top center
3. top right
4. center left
5. center center
6. center right
7. bottom left
8. bottom center
9. bottom right
10. x-% y-% 
11. x-pos y-pos

Example for setting Background Position:-

 /*Syntax of Background Position in CSS*/

 background-position:value;
  

Background Repeat 

You can set an to repeat itself or not within your HTML page. It has 4 values to set.

1. Repeat
2. No Repeat 
3. Repeat X
4. Repeat Y

Example for setting Background Repeat:-

 /*Syntax of Background Repeat in CSS*/

 background-repeat:value;
  

NOTE:- To use properties of background and its relevant values, read posts on each topic in the next section of this blog.