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

The Modern Web

Build modern and responsive webpages Try Front-end

The Modern Web will guide you through the most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. The plain-english explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.

$ Check price
34.9534.95Amazon 4.5 logo(30+ reviews)

More Front-end resources

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources