CSS 3: Backgrounds

Introduction to Backgrounds

Adding a background to your page can be visually appealing, but only if placed properly.

A good web developer makes sure that the background goes along with the website's color scheme and that the image staying in-bounds with bandwidth limitations. Most importantly, the text overlay should have a good-enough contrast that allows readability.

In this section, we'll be discussing how to place image backgrounds, as well as how to apply styles and options to it.

Applying Backgrounds background-image, background-color, background-size

Background Color

You can specify a color for a background in case you want a basic color.

To do so, simply use the background-color property with a color value.

#sample {
  height: 5em;
  width: 10em;
  color: white;
  background-color: purple;
  border: 1px solid purple;
  border-radius: 5px;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
}

Applying a Background Image

To specify a particular image, we use the background-image value with an absolute or relative link to the image inside a url() value.

Grabbing from within your own server

Here is an example of how to grab an image named paper-background.jpg that is located in the img folder within the root directory.

#sample {
  background-image: url("/img/paper-background.jpg");
  height: 4em;
  width: 15em;
  padding: 5px;
  margin: 0 auto;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
}

Grabbing from another server

We can also use a full address to grab it from another server.

background-image: url("https://imgur.com/path/here");

Background Size

In the previous example, we just placed the background, and set the width and height of its containing element.

To set size of the background image itself, we use the background-size property. The first value is the height, while the second is the width.

#sample {
  background-size: 100px 20px;
}

Be sure that the dimensions are scaled properly. If they are not, this will distort (or stretch out) your image. To avoid this problem, simply specify the value you'd like to use, then auto for the other value.

#sample {
  background-size: 100px auto;
} 

background-image: url("/img/paper-background.jpg")

You can see that this background example is scaled so that it can fit within our containing element.

Background Placement background-clip, background-origin

You can specify where in your container you want the background to be placed in. There are two CSS properties you can use:background-clip andbackground-origin.

Background Clip

The background-clip property tells where the containing element should start clipping the background. By default, it is set to border-box.

The image still starts at the top right corner.

The red color indicates portions that are cut off. Thus the border-box won't cut any of the image, while the padding-box and content-box does.

Background Origin

The background-origin tells where a background's top right corner should be placed.

This is very similar to background-clip in its option for values.

Thus, by having the same value for this property as background-clip, we can avoid an image from being cropped.

Positioning A Background

To position a background within the containing element, we use the background-position property.

The values we can place are top,center,bottom,left, andright.

Additionally, we can use combintations like right top, which is exemplified here.

We can also use a length or a percentage. The point of origin is the top left, which can be specified by 0% 0%. 50% 50% would be center.

Attaching the Background with fixed

Sometimes you want the background to stay in place while the user scrolls down. In this case, all other elements will move down, while the background stays in place.

To achieve this effect, use the background-attachment property with the fixed value.

Alternatively, you can specify scroll if you want the background image to move up and down as the user scrolls.

Make sure your image is long enough, or is repeatable if you set your value to scroll!

Background Repeats background-repeat

To specify how an image should repeat, we use the background-repeat property.

With value set to repeat, we get a tile effect, repeating horizontally and vertically:

With value set to repeat-y, the background repeats vertically.

With value set to repeat-x, the background repeats horizontally.

With value set to no-repeat, the background does not repeat at all.

Multiple Backgrounds background

You can place multiple image locations separated by a comma. This is useful if you have a background in which parts of it are repeating elements.

A good example of this would be some background with a border that consists of repeating elements.

Since each repeated element is loaded only once, you can save your user bandwidth, resulting in a page that loads faster.

#background-image {
  background: /* Four corners of your background image */
  url('bg1.png') top left no-repeat,
  url('bg2.png') top right no-repeat,
  url('bg3.png') bottom left no-repeat,
  url('bg4.png') bottom right no-repeat,
  
  /* Four edges that repeat */
  url('bgLeft.png') left repeat-y,
  url('bgRight.png') right repeat-y,
  url('bgTop.png') top repeat-x,
  url('bgBottom.png') bottom repeat-x
}

Background shorthand notation

To specify background properties as a shorthand notation, we use the background property.

background: background-color, background-image, background-attachment, background-position

Note that these must be in order. If you don't want to use any of the properties, simply skip them.

Image Sprites

The collection of images placed in a single image is known as an image sprite.

The idea is to have this single image changes position as the user's mouse change state. The user's act of moving over is called rollover.

So why use a single image sprite rather than three separate images. Simply put, it saves the user bandwidth and reduces the number of server requests.

1. Set the background image for the link/button, but set the background-size to have just enough space to show just one of the images.
2. When the user hovers over the image, position the image up so that the other active state image is shown.
3. Now there just enough space for that new button, so the other buttons are hidden.
4. The effect we get is that the link changes image as the user changes his or her mouse state.