CSS Backgrounds

CSS Background Properties

CSS background properties allow you to control the background effects of an element, including its color, image, repetition, attachment, and position. Mastering these properties is key to creating visually appealing designs.

Core CSS background properties include:

background-color
background-image
background-repeat
background-attachment
background-position
background-size (CSS3)
background-origin (CSS3)
background-clip (CSS3)
And the shorthand background property.

`background-color`

The background-color property sets the background color of an element. Colors can be specified using color names, HEX values, RGB(A) values, or HSL(A) values.

Example setting the page background color:

body {
  background-color: #f0f8ff; /* AliceBlue */
}

/* Different elements with different background colors */
h1 {
  background-color: cornflowerblue;
  color: white; /* Ensure text is readable */
  padding: 10px;
}

div.content-box {
  background-color: rgba(255, 228, 196, 0.5); /* Bisque with 50% opacity */
  padding: 15px;
}

Always ensure sufficient contrast between text color and background color for accessibility.

`background-image`

The background-image property sets one or more background images for an element. Images are specified using the url() function.

By default, a background image is placed at the top-left corner and repeated to cover the entire element.

body {
  background-image: url("paper_texture.png");
}

.hero-section {
  background-image: url("landscape.jpg");
  /* Other background properties like size, position, repeat will be needed */
  height: 400px; /* Ensure div has height to show background */
  color: white;
  text-shadow: 1px 1px 2px black; /* Improve text readability over image */
}

You can also use gradients as background images:

.gradient-box {
  background-image: linear-gradient(to right, red, yellow);
  height: 100px;
}

`background-repeat`

The background-repeat property controls if and how a background image is repeated.

repeat: Repeats the image both horizontally and vertically (default).
repeat-x: Repeats the image only horizontally.
repeat-y: Repeats the image only vertically.
no-repeat: The image is not repeated (shown only once).
space: The image is repeated as much as possible without clipping, with space distributed evenly.
round: The image is repeated and scaled to fill the space without gaps or clipping.

Example: A horizontal gradient pattern that should only repeat horizontally:

.header {
  background-image: url("horizontal_pattern.png");
  background-repeat: repeat-x;
  height: 50px;
}

`background-position`

The background-position property sets the initial position of a background image. If background-repeat is no-repeat, this determines where the single image is placed.

Values can be keywords (e.g., top, center, bottom, left, right), percentages, or length units.

.icon-box {
  background-image: url("icon.png");
  background-repeat: no-repeat;
  background-position: center center; /* Center the icon */
  padding-left: 30px; /* Make space for the icon if text is also present */
  height: 50px;
}

.custom-position {
  background-image: url("logo.svg");
  background-repeat: no-repeat;
  background-position: right 10px top 20px; /* 10px from right, 20px from top */
}

`background-attachment`

The background-attachment property determines whether a background image scrolls with the rest of the page or is fixed.

scroll: The background image scrolls with the page (default).
fixed: The background image is fixed relative to the viewport; it does not scroll with its containing element.
local: The background image scrolls with the element’s content. If the element has a scrollbar, the background moves with the scrolled content.

Example: Creating a parallax-like effect with a fixed background:

body {
  background-image: url("large_scenery.jpg");
  background-attachment: fixed;
  background-size: cover; /* Often used with fixed attachment */
  background-position: center center;
}

`background-size` (CSS3)

The background-size property specifies the size of the background images.

auto: The image retains its original size (default).
<length> or <percentage>: e.g., 100px 50px or 50% 25% (width height).
cover: Scales the image (maintaining aspect ratio) to be as large as possible so that the background area is completely covered by the background image. Some parts of the image may be clipped.
contain: Scales the image (maintaining aspect ratio) to be as large as possible while ensuring the entire image is visible within the background area.

.full-bg {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* Full viewport height */
}

Shorthand `background` Property

To shorten the code, you can specify all individual background properties in one single background property.

The general order for values in the shorthand is:

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip];

Note the / before background-size. If background-size is specified, it must be preceded by background-position and separated by a /.

Example:

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

.advanced-bg {
  background: lightblue url("flowers.jpg") no-repeat center center / cover fixed;
}

You don’t need to include all values. The browser will use defaults for those not specified. However, the order matters if multiple values could be interpreted for different properties (e.g., color vs. position keywords).

Multiple Background Images (CSS3)

CSS3 allows you to specify multiple background images for an element by comma-separating the values for background-image and other related properties. The first image listed is closest to the user (on top).

.multi-bg {
  background-image: url("foreground.png"), url("middle-pattern.svg"), url("far-background.jpg");
  background-repeat: no-repeat, repeat-x, no-repeat;
  background-position: top left, center, bottom right;
  background-size: 50px, auto, cover;
  height: 300px;
  border: 1px solid;
}

Or using the shorthand:

.multi-bg-shorthand {
  background:
    url("fg.png") no-repeat top left / 50px,
    url("pattern.svg") repeat-x center / auto,
    url("bg.jpg") no-repeat bottom right / cover #eee;
  height: 300px;
  border: 1px solid;
}

All CSS Background Properties Reference

Property	Description
`background`	Shorthand to set all background properties in one declaration.
`background-attachment`	Sets whether a background image is fixed or scrolls with the page/element content.
`background-blend-mode`	Specifies how an element’s background images should blend with each other and with the element’s background color.
`background-clip`	Defines how far the background (color or image) extends within an element. Values: `border-box`, `padding-box`, `content-box`.
`background-color`	Sets the background color of an element.
`background-image`	Sets one or more background images for an element.
`background-origin`	Specifies the origin position of a background image. Values: `padding-box`, `border-box`, `content-box`.
`background-position`	Sets the starting position of a background image.
`background-repeat`	Sets if/how a background image will be repeated.
`background-size`	Specifies the size of the background images.

CSS Backgrounds

CSS Background Properties

background-color

background-image

background-repeat

background-position

background-attachment

background-size (CSS3)

Shorthand background Property