CSS Background

CSS Background is used to apply background color or image pattern, this background image pattern can be shown in x axis or y axis. CSS Background is shorthand property of background-color, background-image, background-position and background repeat. All these properties will be combined in one single property as CSS Background. Here is the syntax for Background CSS property and example code.

Syntax of CSS Background Shorthand property

In Background Shorthand property, all these four properties are combined as single declaration.

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position
[css] background: backgrond-color background-image background-repeat background-position;

1) Background Color (background-color)

We will use this background color property for defining a background color. Example code of using background color css property is :

[css] background-color:#000;

2) Background Image (background-image)

Background Image property will be used to add an background image to any div. And position of background image can be controlled by background position property, and also background repeat property. Example code for Background Image :

[css] background-image:url("image.jpeg");

3) Background Repeat (background-repeat)

Background Repeat property will be used to repeat background image in x-axis direction or y-axis direction and image can repeated in all directions using repeat or we can stop repeating by using no-repeat.

Possible values of background-repeat property :

  • repeat-x : Repeats background image in x-axis direction.
  • repeat-y : Repeats background image in y-axis direction.
  • repeat : It will repeats in both directions.
  • no-repeat : It will be shown only once, without repeating.

Example code for background-repeat :

[css] background-repeat:repeat-x;

4) Background Attachment (background-attachment)

The background-attachment property will be used to set whether a background image is fixed or scrolls with the rest of the page.

Possible values for background-attachment property :

  • scroll : This is the default value, background image scrolls with element.
  • fixed : Background image will be fixed with respect to view port.
  • local : Background image will be scrolls along with content.
  • initial : Sets this property to its default value.
  • inherit : Inherits this property value from its parent element.

Example code for background-attachment property :

[css] background-attachment:fixed;

5) Background Position (background-position)

Background position property will be used to position background image property. First value is x-axis position value that means horizontal position. Second value is y-axis that means it’s vertical position.

Example code for Background position property :

[css] background-position:right top;

Possible values for background position property :

  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom

If you specify only value and other values is empty then other value will be considered as center.

If you have any problem while using css background property or any other, then let me know using comment form below.

Vivek Vengala

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.