CSS

Background & Image :(CSS Tutorials:part-8)

Background is the most beautiful part of a web page. CSS can handle background in two ways:

  • color
  • image

You should always use a background color, even background image is used. Because the load time of image is higher than color and when web page is loading then it looks odd. So when you use an image as background then also use a nice background color.

background-color:

The background-color property is used to give a color of background. It takes a value of color code. There are two kinds of color code:

  • RGB
  • Hexadecimal

RGB is the decimal value of red, green and blue color, and the hexadecimal is the hexadecimal equivalent of decimal number. If a color is 255 in decimal then FF is the hexadecimal equivalent. You need to use a # in front of hexadecimal color code.

Example 1:

RGB(255,255,255) is the equivalent of  #FFFFFF.

There is another way to specify this property and is the using of color name like orange, yellow etc.

Example 2:
Here, every declaration indicates red color but in different way.

Background-image:

The background-image property is allowing you to use an image as background. It receives an URI from you and sets as a background.

Example:

Background-repeat:

You already notice that after using a background image, web page shows multi times that image. This is for repeating and to eliminate this effect you can use background-repeat property. Declaration format:

Background-repeat: no-repeat / repeat / repeat-x / repeat-y

Repeat value is the primary value of this property so you see multi time appearance of image. The no-repeat value eliminates repeating effect, repeat-x repeats image in x-axis and repeat-y repeats image in y-axis.

Example:

Background-position:

The background-position property specifies where the background image takes place. This property receives one or two values. Declaration format:

background-position: percentage / left / right / center / top / center

|  bottom

You can use them singly or mix them.

Example:

Background-attachment:

You can fix a background image by using background-attachment property. Declaration format:

Background-attachment: fixed / scroll

Example:
Now the background image of your web page fixed in position, even you scroll it remains fixed.

Short hand property:

You can use all background property in a short hand. Declaration format:

Background: color / image / repeat / attachment / position

Example:

Example of background:

 

 Output:

About the author

Taj12

Leave a Comment