02. 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;
}
A simple div element with a purple background color.

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;
}
A simple div element with a paper-background.

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;
} 

We simply add this property to the example above.

background-image: url("/img/paper-background.jpg")
A simple div element with a properly fitting background.

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

Build modern and responsive webpages

High Performance Web Sites

Build modern and responsive webpages Try Front-end

Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web.

$ Check price
29.9929.99Amazon 4.5 logo(63+ reviews)

More Front-end resources

Aching back from coding all day?

Self-Massage Tool

Aching back from coding all day? Try Back Problems

Relieve spasms, tight muscles, trigger points and pressure points with the Body Back Buddy! This trigger point massage is designed to help you self-message any area of your body - especially those that are hard to reach. Keeping your muscles relaxes and out of contraction is importan in helping to reduce pain and prevent muscle injury.

$ Check price
29.9529.95Amazon 4.5 logo(3,443+ reviews)

More Back Problems resources

Ad