Computer scienceFrontendCSSBasic propertiesCommon properties

Background

Provided by: JetBrains Academy
12 minutes read

This css property is used for setting a background image/color to the element. It may also help to solve some advanced problems, but since we are completely new to this, let's begin with the basics.

It turns out that a web page can't be just some black text on a white background. At least that's not what people want it to look like. That's why you need to add some colors, which is what background-color is for. Here's what may be used as a value of the property:

  • color name (e.g., red | green | yellow)

  • HTML color value (e.g., #ffffff | #7b917b | #d0d0d0)

  • default value (initial)

  • inherited value (inherit)

Useful, right? But sometimes it's not enough; sometimes you want to set an image as the background, and here comes the background-image property. Here you can use as a value:

  • absolute path to the image (e.g., background-image: url('https://clck.ru/R6MJV');)

  • relative path to the image in the project folder (e.g., background-image: url('assets/images/01.jpg');)

  • gradient (e.g., background-image: linear-gradient(red, yellow);)

By default, background images are stuck to the top-left corner of the viewport and displayed in their natural size, and that's pretty annoying. Here's what it looks like:

800 by 800 pixels square inside a large viewport

But let's say thank you to all the people who ever worked on improving HTML and made the developer's work much easier. Like in our case, by adding some fancy properties that we'll review below.

background-repeat

It makes the image repeat itself on the X or Y axis if it's smaller than the viewport. The values are:

  • repeat for image to be repeated as many times as needed to fill the viewport

  • no-repeat for image not to be repeated

  • repeat-x | repeat-y for image to be repeated on the axis as many times as needed to fill the viewport

The below HTML code is also used in further examples. And here are the code samples:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

CSS:

* {
  box-sizing: border-box;
  margin: 0; 
  padding: 0;
}

.container {
  background: url("photo.png");
  background-repeat: no-repeat;
  background-size: 300px 300px;
  border: 4px solid #2778f6;
  height: 100vh;
  width: 100vw;
}

Small square inside large viewport

No need to worry about the other CSS part that is not understandable. These are covered in the later topics. For now, focus on the background property. Now, let's repeat the same image on the y-axis. The HTML code will be the same as the above and the CSS to achieve the desired output is given below:

* {
  box-sizing: border-box;
  margin: 0; 
  padding: 0;
}

.container {
  background: url("photo.png");
  background-repeat: repeat-y;
  background-size: 300px 300px;
  border: 4px solid #2778f6;
  height: 100vh;
  width: 100vw;
}

Three blue squares in one column

As shown in the above output, the image is repeated on the y-axis and it looks like there is only one big image but in reality, the same image is being repeated and you can check this by applying the margin property to the image. Similarly, you can repeat the background image on the x-axis too. You can try it yourself in your own editor and see the results.

Now, let's see what result does the repeat value gives when it is assigned to the background-repeat property.

CSS:

* {
  box-sizing: border-box;
  margin: 0; 
  padding: 0;
}

.container {
  background: url("photo.png");
  background-repeat: repeat;
  background-size: 300px 300px;
  border: 4px solid #2778f6;
  height: 100vh;
  width: 100vw;
}

The viewport filled by blue squares

background-attachment

The background image is either scrolled with the content or stays in place. The values are:

  • scroll for image to be scrolled with the contents

  • fixed for image to stay in place

Here's a code sample showing the usage of background-attachment: scroll:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="content">
      <div class="scroll"></div>
    </div>
  </body>
</html>

CSS:

.content {
  height: 200px;
  max-width: 450px;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 50%;
}

.scroll {
  background: url(back.png);
  height: 300px;

  background-attachment: scroll;
}

Blue page with scroll

Now, the usage of background-attachment: fixed:

CSS:

.content {
  height: 200px;
  max-width: 450px;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 50%;
}

.fixed {
  background: url(back.png);
  background-repeat: no-repeat;
  height: 300px;

  background-attachment: fixed;
}

Blue page with scroll that dont give any effect while scroling

background-position

It sets background positioning from the default position (top-left corner) to any other position you want.

  • top | left | bottom | right | <value>% values set the gap between one side of the viewport and the image

  • center value makes the image centered on both x and y axis.

The property works with two set values, where first defines horizontal margins and the second one defines vertical margins. If there's only one value defined, the second one will be set to center.

Here's a code sample and the result of background-position: top right:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container"> 
  </body>
</html>

CSS:

.container {
  background: url(back.png);
  background-repeat: no-repeat;

  background-position: top right;
  
  border: 2px solid #2778f6;
  height: 500px;
  width: 500px;
}

Blue square inside white square

Besides using the predefined values, we can also use pixels or percentages.

If we want to move the background 50px to the left and all the way to the bottom, we can use background-position: 50px 100%:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div class="container">    
  </div>
</body>
</html>
.container {
  background: url(back.png);
  background-repeat: no-repeat;

  background-position: 50px 100%;

  border: 2px solid #2778f6;
  height: 500px;
  width: 500px;
}

The blue square inside the white square placed in bottom

background-size

It sets the size for the background image. The values are:

  • <value>% scales the image proportionally and makes it bigger/smaller than its actual size by the indicated value percents of parental block size.
    background-size: 50%;
    Blue square aligned to the top left edge of a parent box

    background-size: 90%;
    Blue square is out of viewport

  • contain scales the image proportionally so its height or width matches height or width of the viewport and it is not cropped
    background-size: contain;
    Blue square is aligned to the left side of a parent box

  • cover scales the image proportionally so its height or width matches height or width of the viewport to fill the viewport
    Blue square is overflowed the parent box

For example, the following code sample will make the background twice as big as the size of the block:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div class="container">
  </div>
</body>
</html>
.container {
  background: url('bg1.jpg');
  background-size: 200%;
  background-repeat: no-repeat;
  border: 4px solid #2778f6;
  color: #294360;
  font-size: 2em;
  min-height: 80vh;
  overflow: auto;
  width: 60vw;
}

A small visible part of the blue square

background-clip

It determines the background display area. The values are:

  • border-box for background to include the border

  • padding-box for background to include the padding but not the border

  • content-box for background to be displayed only behind the content

The following code sample illustrates each possible value:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div class="clip1">
    <div class="content">
      Content
    </div>
  </div>
  <div class="clip2">
    <div class="content">
      Content
    </div>
  </div>
  <div class="clip3">
    <div class="content">
      Content
    </div>
  </div>
</body>
</html>
.clip1,
.clip2,
.clip3 {
  background: #d1e4fc;
  border: 10px dashed #2778f6;
  display: inline-block;
  height: 150px;
  padding: 75px;
  margin-right: 3em;
  text-align: center;
  width: 150px;
}

.content {
  border: 1px dotted #2778f6;
  color: #294360;
  font-size: 1.5em;
  height: 150px;
  text-align: center;
  width: 150px;
}

.clip1 {
  background-clip: border-box;
}

.clip2 {
  background-clip: padding-box;
}

.clip3{
  background-clip: content-box;
}


Representation of background-clip property

That's pretty much it for background settings, but there's still one thing left to learn. At the very beginning of the topic we mentioned the background property, and now it's time to come back to it.

background property allows you to combine all the properties from above in just one line of css making your code look a bit more beautiful. But it's not necessary to list all of the properties. If one is missing, the default value will be used instead. Here's an example:

div {
  background: url("assets/images/logo.png") no-repeat contain;
}

Conclusion

Now let's sum up everything we've learned in this topic:

  1. You can set a color or an image or a gradient as a background.

  2. Properties for the background image setting are limited, but opportunities they give are not.

  3. You can combine all the properties in just one background property to make your code shorter and nicer.

344 learners liked this piece of theory. 84 didn't like it. What about you?
Report a typo