CSS is a very important subject in the background. There are several properties in the CSS for the background change of HTML elements. Below is the discussion.


Background color

There is a property called background-color that can give its color any color. Hexadecimal (such as # fff000, # 000000 etc), RGB (eg rgb (192, 192, 192), rgb (255255,0) etc) or color names (such as maroon, black, red etc.) By default, lets take “transparent” by default.


Background pictures

There is a property named background-image which gives it any picture behind the element. The value of this is to give


background-image : url(path/to/image);


The source of the photo should be shown in the url.



Background-repeat properties can be fixed in the background (if there is a background-image) or where to repeat it. Such as

background-repeat: repeat;


If repeat is given, the image will be repetitive with both axes X and Y, it is by default. Apart from this, 3 more values can be given:

If it is no-repeat, there will be no repetition.

If repeat-x is repeated only X axis

Repeat the Y axis if repeat-y is given.


Background position

Background-position property allows background picture position to be desired. By default the value is 0% 0%

It could be possible values

background-position:left top;
background-position:left center;
background-position:left bottom;
background-position:center top;
background-position:center center;
background-position:center bottom;
background-position:right top;
background-position:right center;
background-position:right bottom;
background-position:x% y%;
background-position:Xpx Ypx;

By looking at the values, it will be understood which direction the image will be. The last 3 lines x% y% means how far away from the X-axis and y% means how far away from the Y-axis. If any value is given, the value of the rest is 50%. The top plank will work on 0% 0%.


** Left center, left top, etc. If you give any one of the values, the rest will take center.


The pixel value of% can be given by. And if you inherit, you get the parent element.


There is another property called background-attachment, its value can be “scroll” (it is by default) and “fixed”. With scrolling the mouse scrolls the background along with scrolling (if the content is longer than the browser window) and fixed, scrolling the mouse will not move the background along.

An example with all of them

   background-color: #5d8e50;
   background-repeat: no-repeat;
   background-position: center right;

Use all the properties together


All of the above can be used together with background properties. One of the values is to give space.

For example, the background-color value is to be returned to the number 1, then the background-image then the background-repeat then the background-position is finally background-attachment.

  background: #5d8e50 url(/images/stories/pos_back.jpg) no-repeat  center right scroll;

** Must have space with each value


The code will be the same as the previous example, by removing all the properties.