Styling Backgrounds

June 22, 2017

In this lesson, you’ll learn

How to color element backgrounds
How to add and customize background images
How to add gradients to your web page

Adding a Background Color

You can add a background color to any element by using the background-color property.

div {
  background-color: #16a085;
  padding: 15px;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      background-color: #16a085;
      padding: 15px;
    }
  </style>
</head>
<body>
  <div>This is a regular div.</div>
</body>
</html>

Result:

Just like with text color, you can use any type of color notation available in CSS: HEX, RGB, RGBA, or something else.

Adding a Background Image

You can use an image as a background by using the background-image property. To use this property, you must specify the path to the image you want to use.

The image can be on your own server or on another webpage. Let’s pretend that we have an image like the one below:

The background image we’ll use.

.cool-background {
  background-image: url("https://static.commonlounge.com/fp/600w/gTW2eC7gJEyONzBgrsGxhZLFP1520497419_kc");
}

This tells the browser to load our image in the background.

We can also use a property called background-repeat to specify whether the background image should repeat across the element or not.

.cool-background {
    background-image: url("https://static.commonlounge.com/fp/600w/gTW2eC7gJEyONzBgrsGxhZLFP1520497419_kc");
    background-repeat: repeat;
}

Let’s try this one out:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cool-background {
      background-image: url("https://static.commonlounge.com/fp/600w/gTW2eC7gJEyONzBgrsGxhZLFP1520497419_kc");
      background-repeat: repeat;
    }
  </style>
</head>
<body class="cool-background">
</body>
</html>

Result:

Note that you may have to go Fullscreen to see the repeat in action.

Use repeat to repeat the background in all directions, repeat-x to repeat it horizontally, repeat-y to repeat it vertically, and no-repeat to display the image only once.

Next, you can specify a background-position to specify where the background image should display. Background-position takes two values: the x-position (or horizontal position) and the y-position (or vertical position). You can write these in pixels, percents, ems, rems, or keywords like top or center.

.cool-background {
  background-image: url("https://static.commonlounge.com/fp/600w/gTW2eC7gJEyONzBgrsGxhZLFP1520497419_kc");
  background-repeat: no-repeat;
  background-position: 50% 0;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cool-background {
      background-image: url("https://static.commonlounge.com/fp/600w/gTW2eC7gJEyONzBgrsGxhZLFP1520497419_kc");
      background-repeat: no-repeat;
      background-position: 50% 0;
    }
  </style>
</head>
<body class="cool-background">
</body>
</html>

Result:

This displays the background once and positions it in the very middle of the element (50% horizontally and 50% vertically).

There is one more helpful property called background-size that you can use to style your background.

Instead of repeating the background image, you may want the background image to scale up to fit the size of the element. In this case, you can write:

.cool-background {
  background-image: url("https://static.commonlounge.com/fp/600w/gTW2eC7gJEyONzBgrsGxhZLFP1520497419_kc");
  background-size: cover;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cool-background {
      background-image: url("https://static.commonlounge.com/fp/600w/gTW2eC7gJEyONzBgrsGxhZLFP1520497419_kc");
      background-size: cover;
    }
  </style>
</head>
<body class="cool-background">
</body>
</html>

Result:

This makes the background-image “cover” the entire element. Parts of the background image may be cut off, but it will completely cover the element, leaving no whitespace.

You can also have the background image fit neatly inside the element without losing any part of the image. This means that it will scale up to as big as it can get without going over the boundary of the element. This is called “contain.” It will leave some whitespace around the image if it’s not exactly the same size as the element.

.cool-background {
  background-image: url("https://static.commonlounge.com/fp/600w/gTW2eC7gJEyONzBgrsGxhZLFP1520497419_kc");
  background-repeat: no-repeat;
  background-size: contain;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cool-background {
      height: 500px;
      width: 500px;
      background-image: url("https://static.commonlounge.com/fp/600w/gTW2eC7gJEyONzBgrsGxhZLFP1520497419_kc");
      background-repeat: no-repeat;
      background-size: contain;
    }
  </style>
</head>
<body class="cool-background">
</body>
</html>

Result:

Adding a Gradient

Besides flat colors and images, you can add a gradient background to your elements. A basic gradient is written like this:

.gradient-background {
  background-image: linear-gradient(to right, #2ecc71, #3498db);
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .gradient-background {
      background-image: linear-gradient(to right, #2ecc71, #3498db);
    }
  </style>
</head>
<body class="gradient-background">
</body>
</html>

Result:

Inside the parenthesis, you must write the direction of the gradient and list each color in order that they should appear in the gradient. You can write more than two colors.

For the direction of the gradient, you can write to top, to right, to bottom, to left, or specify an angle (such as 45deg). 0deg points straight upward, and 90deg points right.

You can also create a radial gradient that forms a circular shape instead of a flat line.

It’s difficult to write gradients by yourself, so you can use a Gradient Generator (like this one: Ultimate CSS Gradient Generator) to do the work for you. You can explore even more options for customizing gradients in the generator.

Adding Multiple Backgrounds

You can add multiple background colors, gradients, or images at the same time. Just list each background you’d like to use under each property, in the order you’d like them to display. The background listed first displays first, and the background listed last displays last.

.gradient-background {
  background-image: url("https://static.commonlounge.com/fp/600w/gTW2eC7gJEyONzBgrsGxhZLFP1520497419_kc"), linear-gradient(to right, #2ecc71, #3498db);
  background-repeat: no-repeat, no-repeat;
  background-position: top left, top left;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .gradient-background {
      background-image: url("https://static.commonlounge.com/fp/600w/gTW2eC7gJEyONzBgrsGxhZLFP1520497419_kc"), linear-gradient(to right, #2ecc71, #3498db);
      background-repeat: no-repeat, repeat;
      background-position: top left, top left;
    }
  </style>
</head>
<body class="gradient-background">
</body>
</html>

Result:

Now you can dress up your web page with colors, gradients, and background-images.

Go to the next lesson to learn how to make lists with HTML.