CSS Background Styling

css-bgnd

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:

PropertyDescription
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
background-repeat

Sets how a background image will be repeated

 

background Property

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":

body {background:#ffffff url("img_server.png") no-repeat right top;}

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:

  1. background-color.  This is set as a Hexadecimal value #FFFFFF;
  2. background-image.    Uses the "URL ()" syntax to point to the image folder.
  3. background-repeat.   This is set to "no-repeat" value so it only appears once.
  4. background-attachment.   This value is not set.
  5. 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:

<div class="style1">This is a background style.</div>

Background Color

The background-color property specifies the background color of an element.

.style1 {background-color:#00ff2d;}
  • 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:

This is a background style.

 


Background Image

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:

.style1 {background-image:url("background.gif");}
This is a background image.
This is a background image that is repeated.

 

Background Image - Repeat Horizontally, Vertically or No Repeat.

By default, the background-image property repeats an image both horizontally and vertically.

Horizontal Background

If the image is repeated only horizontally (repeat-x)

.style1 {
background-image: url("background.gif");
background-repeat: repeat-x ;
}


This is a background image that is repeated horizontally.

 Vertical Backgrounds 

If the image is repeated only vertically (repeat-y)

.style1 {
background-image:url("background.gif");
background-repeat: repeat-y ;
}


This is a background image that is repeated vertically.

Background no-repeat 

Showing the image only once is again specified by the background-repeat property like so:

.style1 {
background-image:url("background.gif");
background-repeat: no-repeat ;
}


This is a background image that is not repeated and appears only once.

Background-position Property

Showing the image only once in a certain position is specified by the background-position property like so:

.style1 {
background-image:url("background.gif");
background-position: right bottom ;
}

This is a background image that is not repeated and appears only once on the right and bottom.

 

As you can see the BACKGROUND property can be a very versatile CSS property to enhance any web page or element.

 

Leave your comments

Post comment as a guest

0 / 300 Character restriction
Your text should be in between 10-300 characters
terms and condition.
  • No comments found

Get The Latest Browsers

firefoxLogo

google

News Letter

Sign up for news letter