Css Backgrounds
This tells you how to set backgrounds of various HTML elements. You can set the following background properties of an element -- The background-color property is used to set the background color of an element.
- The background-image property is used to set the background image of an element.
- The background-repeat property is used to control the repetition of an image in the background.
- The background-position property is used to control the position of an image in the background.
- The background-attachment property is used to control the scrolling of an image in the background.
- The background property is used as a shorthand to specify a number of other background properties.
Set the Background Color
Following is the example which demonstrates how to set the background color for an element.
|
Set the Background Image
We can set the background image by calling local stored images as shown below -
|
Hello World
Repeat the Background Image
The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once. By default background-repeat property will have repeat value.
|
|
|
Set the Background Image Position
The following example demonstrates how to set the background image position 100 pixels away from the left side.
|
|
Set the Background Attachment
Background attachment determines whether a background image is fixed or scrolls with the rest of the page. The following example demonstrates how to set the fixed background image.
|
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
|
The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. |
|
« Previous Next »