CSS

 

Backgrounds

Everything except margins is considered background

Background-images may not display in all browsers.

Default state of the backgrounds is transparent but they can be filled with color, or images.

Multiple Backgrounds:

You can add multiple background images to the body of a document.

The following adds three background images to a page.
body {background-image: url("image1"), url("image2"), url("image3")}

Each url("image1") creates a new background layer that sits one on top of the other. A value of none, an image with 0 width and height, or an image that fails to download still creates a new layer, but doesn’t show an image.

Background Repeat

Determines how background-images are tiled
  • no-repeat — the image isn’t tiled
  • repeat-x — the image tiles horizontally only
  • repeat-y — the image tiles vertically only
  • repeat — the image tiles both horizontally and vertically
  • space — the image will tile to fill the background with as many complete images as possible. The images wil then be spaced evenly with first and last images touching the edge
  • round — image will be tiled to fill the background with as many complete images as possible. The images will then be scaled to fit the area exactly.

Background Attachment

Determines how the image scrolls with respect to the viewport.

  • fixed — the image doesn’t scroll. It’s fixed where it is.
  • local — the image scrolls with the element’s content. It’s fixed to the content.
  • scroll — the image scrolls with element. It’s fixed to element.

Background Size

By default, images will be whatever size they are by default (the auto value) but you can control the image size in several ways. The values are % and length.
body {background-size: 300px 40%;}
The first value is the width and the second the height. Negative values are not permitted.

Background Size

  • contain — scales the image while preserving its aspect ratio to the largest size that both height and width can still fit within the background area
    cover — scales the image while preserving its aspect ratio to the smallest size that both height and width can still fit within the background area