To define background effects for elements, the CSS background properties used.
Properties of CSS Background :
The background color property specifies an element's background colour.
Exampe:
Output:
This page has a light blue background color!
A color is specified with CSS most often:
Example:
Output:
This paragraph has its own background color.
We are still in the div element.
The image background property specifies an picture to be used as an element background.
The image is repeated by default so that it covers the whole element.
Example:
Output:
This page has an image as the background!
Example:
This example shows a bad text and background image combination. The text can not be read:
Output:
This text is not easy to read on this background image.
Note: Use those picture that does not disturb the text when using a background picture.
The background picture property repeats an picture horizontally as well as vertically by default. Some pictures should only be repeated horizontally or vertically or they will seem odd:
Example:
Output:
Strange background image...
Strange background image...
Strange background image...
Strange background image...
Strange background image...
The background will look better if the above picture is repeated horizontally only (background repeat: repeat-x ;)
Example:
Output
Here, a background image is repeated only horizontally!
Here, a background image is repeated only horizontally!
Here, a background image is repeated only horizontally!
Here, a background image is repeated only horizontally!
To repeat an image vertically, set background-repeat: repeat-y;
The background image is only shown once by the background-repeat
property
Example:
Output:
UK Academe background image example.
The background image is only showing once, but it is disturbing the reader!
The background image in the example above is located in the same spot as the text. We want to change the image position so that the text doesn't too much disturb it.
The position of the Background Image is specify by the background position
property.
Example:
Output:
UK Academe background no-repeat, set position example.
The background picture is now only displayed once, and placed away from the text.
We have added a margin on the right side in this instance,
so the background picture never disturbs the text.
The background attachment property specifies whether to scroll or to fix (won't scroll with the remaining page) the background image.
Example:
In order to shorten the code, all background properties in one property can also be specified: it is referred to as a shorthand property.
The shorthand property for background is background.
Example:
Use the shorthand property to make one declaration of all background properties:
Output:
The background property is a shorthand property for all background
properties to be entered in a single declaration.
We can see, The background picture is only displayed once here,
and is also located in the top right-hand corner.
We have also added a right margin in order to prevent the text from writing over
the background picture.
The order of the property values is: when using the shorthand property:
It doesn't matter whether any of the property values are absent, provided the others are in this sequence.
We use cookies to ensure you get the best experience on our website, if you continue to browse you'll be acconsent with our Cookies Policy.
Got it!