TutorialLab
css background
Home » Web Development » CSS Tutorials » CSS Background

CSS Background

CSS Background:

The CSS background properties are used to define the background effects for elements.

CSS background properties:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Color:

The Background Color property specifies the background color of an element.

The background color of a page is set like this:

With CSS, a color is most often specified by:

  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”
  • a valid color name – like “red”

Background Image:

The Background Image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

Background Image Repeat Horizontally Or Vertically:

By default, the Background Image property repeats an image both horizontally and vertically.

Background Repeat property also take value repeat-x for making x-axis repetition  and repeat-y for making y-axis repetition.

Background Image Set Position and No Repeat:

All possible values for background position property. top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

Background Image Fixed Position:

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

another value that background attachment property accept is ‘scroll’.

Background Short Hand Property:

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background:

When using the shorthand property the order of the property values is:

  • Background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Previous lecture Next Lecture

Aizaz Ali

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.