CSS background properties are used to define the background effects of an element.
Most websites have either a background colour, or background image. Even individual elements can have images or colours set to give enhanced definition.
You can use different properties to design your elements background depending on the design of your website.
We are going to go through the basics of the background properties, but keep in mind with the new modern browsers a lot more is possible.
In order to give some Background Effects to HTML Document following properties are used:
|background||Sets all the background properties in one declaration|
|background-attachment||Sets whether a background image is fixed or scrolls with the rest of the page|
|background-color||Sets the background color of an element|
|background-image||Sets the background image for an element|
|background-position||Sets the starting position of a background image|
Sets how a background image will be repeated
As you can see from the examples above, there are many properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.
The shorthand property for background is simply "background":
As we can see above the background property is set for the "body" tag
When using the shorthand property the order of the property values is:
- background-color. This is set as a Hexadecimal value #FFFFFF;
- background-image. Uses the "URL ()" syntax to point to the image folder.
- background-repeat. This is set to "no-repeat" value so it only appears once.
- background-attachment. This value is not set.
- background-position. Positioned to start from the "right" and "top".
It does not matter if one of the property values are not used or set, as long as the ones that are present are in this order.
These property values can be set individually also.
With CSS, a color is most often specified by:
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- a colour name - like "red"
The "colour name" option is very rarely used, it's the HEX colour reference that is widely used.
For these examples we will be styling a "div" tag with a class selector of "style1" like so:
The background-color property specifies the background color of an element.
- We set the class selector ".style1"
- Inside the curly braces we type the property we want to change "background-color"
- Then we set the value we want which in this case is "#00ff2d"
This now gives us a result of:
The background-image property specifies an image to use as the background of an element.
The background image for a page can be set like this:
Background Image - Repeat Horizontally, Vertically or No Repeat.
By default, the background-image property repeats an image both horizontally and vertically.
If the image is repeated only horizontally (repeat-x)
background-repeat: repeat-x ;
If the image is repeated only vertically (repeat-y)
background-repeat: repeat-y ;
Showing the image only once is again specified by the background-repeat property like so:
background-repeat: no-repeat ;
Showing the image only once in a certain position is specified by the background-position property like so:
background-position: right bottom ;
As you can see the BACKGROUND property can be a very versatile CSS property to enhance any web page or element.