Decorating your Page with Backgrounds

Decorating your Page with Backgrounds
namecheap placeholder image

A pretty easy and fast way to add a bit of flavor to your pages is to give it a background of some kind. Whether that background is a color, an image, or a gradient, a background makes a big difference in how your website looks!

Background Color

This is the easiest way to change your page's background color from the default white. You just pick a color with background-color and let the browser do the rest like this:

	
	body {
		background-color: lightgray;
	}
	
Example of background color.
Example of background color.

You can replace light-gray with any color, in any of the formats previously discussed and it will also work just fine.

Background Image

When you're ready to step your background game up, you can specify an entire image to be your background, instead of a color. You accomplish this using the background-image property.

Let's say you want this image as your background:

A cute puppy.
A cute puppy.

The CSS might look like this:

	
	body {
		background: url("puppy.png");
	}
	

And your page like this:

A cute puppy as your background image.
A cute puppy as your background image.
namecheap placeholder image

Background Image Repetition

For images where you might want to repeat it over and over again as the background, you can specify just that. The property for this is background-repeat and below are the valid values for this:

  1. repeat: This repeats the image both on the x and the y-axis.
  2. repeat-x: This repeats the image on the y-axis.
  3. repeat-y: This repeats the image on the x-axis.
  4. no-repeat: This renders a single image without any repetition.

Background Image Position

In case you don't want your background image to repeat, perhaps you then want to control where on the screen it will be rendered. By default, it will render from the top left corner, but you can specify otherwise using the background-position property.

The main values for this property are left, top, right, bottom, and center, but you can also use lengths in the form of background-position: x y;.

Below are some valid values for background-position:

	
	body {
		background-position: 40% 70%;
		background-position: right top;
		background-position: left center;
		background-position: right bottom;
		background-position: 2rem 5rem;
	}
	

Background Image Size

Let's say you want to change the size of your background image. Have no fear, background-size is here to save us all.

You are free to give it a new width and height to set the image to, like so:

	
	body {
		background-size: 250px 300px;
		background-size: 70% 90%;
	}
	

In the common case where you want the image to stretch and take up the entire window while respecting the image's ratio, you can use the cover value:

	
	body {
		background-size: cover;
	}
	
namecheap placeholder image

Gradients

When you don't want to use a solid color, using gradients is a simple way to use multiple colors on your page while allowing the browser to render all the colors in between.

Linear Gradients

The most simple of gradients are linear gradients. For example, here is a basic blue to purple gradient:

	
	body {
		background: linear-gradient(blue, purple);
	}
	
A blue to purple linear gradient.
A blue to purple linear gradient.
  • CSS
Run

Don't want your linear gradients to go from top to bottom? No problem. If you give the property a degrees value, it will render it at that angle.

Here is how it looks like when you render at a 90-degree angle:

	
	body {
		background: linear-gradient(90deg, blue, purple);
	}
	
A blue to purple angled linear gradient.
A blue to purple angled linear gradient.
  • CSS
Run

Radial Gradients

Unlike linear gradients, which are rendered in the form of a straight line, radial gradients are rendered in the form of a circle. To demonstrate, here is a radial gradient using the same colors as before:

	
	body {
		background: radial-gradient(blue, purple);
	}
	
A blue to purple radial gradient.
A blue to purple radial gradient.
  • CSS
Run

When done right, gradients can be a very tasteful way to spruce up your page!

Further Reading