CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Backgrounds

CSS provide several properties for styling the background of an element.

CSS background properties:

The following section will describe you how to use these properties to set the different styles for the background.

Background Color

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

The example below demonstrates, how to set the background color of a web page

Run code

Colors in CSS most often specified by the following methods:

  • color name - like "lightgreen"
  • HEX value - like "#4285f4"
  • RGB value - like "rgb(19, 217, 19)"

Look at CSS Color Values for a complete list of possible color values.

Background Image

The background-image property sets one or more background images on an element.

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

Run code

Tip: When using a background image, use an image that does not disturb the text.

Below is an example of a good combination of text and background image. The text is easily readable:

Run code

Background Repeat

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

The background-repeat property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all:

Run code

There are 3 values of background-repeat property:

  • no-repeat - image is not repeated
  • repeat-x - set a background image repeat horizontally
  • repeat-y - set a background image repeat vertically

Background Position

The position of the image is specified by the background-position property.

If no background-position has been specified, the image is placed at the default top-left position of the element i.e. at (0,0).

Run code

In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text.

In the following example, the background image is positioned at top-right corner.

Run code

Background Attachment

The background-attachment property defines whether the background image scrolls with the document, or remains fixed to the viewing area.

Run code

Background - Shorthand property

As you can see from the above examples, there are many properties to consider when dealing with the backgrounds. It is also possible to specify all these properties in one single property, to shorten the code. This is called a shorthand property.

The background property is a shorthand property for setting all individual background properties in one declaration.

Run code

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

background: color image repeat attachment position;

It does not matter if one of the property values is missing, as long as the other ones are in this order.

CSS Background properties

Property Description
background Sets all individual background properties in one declaration
background-attachment Specifies 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 Set the background image of an element
background-repeat Specifies how a background image will be repeated
background-position Specifies the position of the background image