Background Using CSS

You can change the color of the background using CSS, or use a background image. Background colors and background images can be applied to the entire page or to individual elements by using the background-color property.

images/articles/css/css26.webp

1. Changing Background Color

The background color of an HTML element is changed with the background-color CSS property. The background color uses the same syntax (hex code) as font colors. For example,

body {
 background-color: #FFFF00;
}

With this CSS, the background color of the page would be yellow.

2. Adding Background Image

Background images are a good way to create a nice looking HTML page. Using a background image, you can create a gradient effect, where one part of the page is a solid color and the color fades out or gets lighter as it stretches to the other side.

Background images appear behind other elements. This means that you can overlay all your HTML, including other images, on top of a background image.

Background images are added with the background-image CSS property. For example,

background-image: url("image.jpg");

Beyond the ability to set an image as the background of an element, CSS includes several properties that offer you great flexibility in the exact placement of the image:

Repeat: Sets whether the image tiles appear only once or repeat only horizontally or vertically.

  • repeat instructs the browser to tile the graphic throughout the background of the element horizontally and vertically. This is the default value if the property is omitted.
  • repeat-x instructs the browser to tile the background graphic horizontally only, so that the graphic repeats in one straight horizontal line along the top of the element.
  • repeat-y instructs the browser to tile the background graphic vertically only, so the graphic repeats in one straight vertical line along the left side of the element.
  • no-repeat causes the background graphic to appear only once (and not tile).

Attachment: Sets whether the image scrolls with the rest of the page or stays in one place.

  • scroll instructs the background graphic to scroll with the element. This is the default value if the property is omitted.
  • fixed instructs the browser not to scroll the background content with the rest of the element. However, it will scroll with parent elements.
  • local is similar to fixed, but the background is fixed to the content of the element, rather than the element itself.

Position: Moves the image to the left and down (positive values) or to the right and up (negative values) from the top-left corner of the parent element. The first number tells the browser the distance the element should appear from the left edge of its parent; the second value specifies the position from the top edge of the parent.

Size: Sets the width and height of the image within the element’s background as an absolute length, percentage, or the keywords - cover, contain, or auto (which maintains the aspect ration).

Clip: Sets whether the background fits to the border or just within the content area.

Origin: Sets the position of the background relative to the border, padding, or content. This is especially useful for setting the background of inline elements that might break across multiple lines.

Multiple background images: Although not a specific property, CSS now allows you to layer multiple background images using a comma-separated list.

3. Background Shorthand

The background shorthand property allows you to define the background image and color for an entire page or individual element, rolling many of the backgrou nd properties into a single quick and compressed declaration.

For example,

background: rgb(85,85,85) url(../images/bg-image.jpg) repeat fixed 0 0;

Type a value for the background color, followed by a space. Next, specify the URL for the background image. Type url() and in the parenthesis, add an absolute or relative path to the background image, followed by a space. Alternatively, you could type none instead of a URL, which would instruct the browser not to use a background image.

If you included a background image, specify how it should tile. Type a value for the way you want your background to repeat, followed by a space. Then, specify how it should scroll. Then, specify how it should be positioned.