In CSS, there are different background properties which can be used to define the background effects of any HTML element. The various background effects are -
The above example will change the background color of the h1 element with the "#336699" color.
In CSS the color code can be specified by the following ways:
The image will cover the entire element because the by default behaviour of the "background-image" property is repeated.
So it will repeats an image both horizontally and vertically. CSS "background-repeat" property allows to set the values like repeat, no-repeat, repeat horizontally only etc.
In the above example, the image will repeated horizontally only.
Other possible values of "background-repeat" property are given below
CSS Programing
Background Color
To apply a color in the background of any HTML Element, In CSS there is property "background-color".h1
{
background-color: #336699;
}
The above example will change the background color of the h1 element with the "#336699" color.
In CSS the color code can be specified by the following ways:
- By HEX value - like "#336699"
- By RGB value - like "rgb( 255, 0, 0 )"
- By color name - like "blue"
Background Image
To apply an image in the background of any HTML Element, In CSS there is property "background-image".The image will cover the entire element because the by default behaviour of the "background-image" property is repeated.
body
{
background-image: url( "example.jpg" );
}
background-image property supports all the major types of image (like .jpg, .png, .gif, .bmp etc)Background Repeat
CSS "background-repeat" property oftenly used with the "background-image" property. The by default behaviour of the "background-image" property is repeated.So it will repeats an image both horizontally and vertically. CSS "background-repeat" property allows to set the values like repeat, no-repeat, repeat horizontally only etc.
body
{
background-image: url( "example.jpg" );
background-repeat: repeat-x;
}
In the above example, the image will repeated horizontally only.
Other possible values of "background-repeat" property are given below
| Value | Description |
| repeat | Specify the repetition both vertically and horizontally. |
| repeat-x | Specify the repetition only horizontally |
| repeat-y | Specify the repetition only vertically |
| no-repeat | The background-image will not be repeated |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Background Attachment
The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window. Means that if any background image is set as fixed with the "background-attachment" property then the image will not move during scrolling in the browser.body
{
background: url( "example.jpg" );
background-repeat: no-repeat;
background-attachment: fixed;
}
The possible values of "background-attachment" property are given below:| Value | Description |
| scroll | The background scrolls along with the element. This is default |
| fixed | The background is fixed with regard to the viewport |
| local | The background scrolls along with the element's contents |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Background Position
The "background-position" property allows to set the position of the image or color used in the background of any HTML element.body
{
background-image: url( "example.jpg" );
background-repeat: no-repeat;
background-position: right top;
}
The possible values of "background-position" property are given below:| Value | Description |
| left top left center left bottom right top right center right bottom center top center center center bottom | If you only specify one keyword, the other value will be "center" |
| x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0% |
| xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Background - Shorthand property
To shorten the code while using the CSS background properties, it is also possible to specify all the background properties in one single property.body
{
background: #336699 url( "example.jpg" ) no-repeat right top;
}