facebook google plus twitter
Webucator's Free Introduction to CSS Tutorial

Lesson: Backgrounds

Welcome to our free Introduction to CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

In this lesson, you will work with backgrounds.

Lesson Goals

  • Work with the background-color property.
  • Work with the background-image property.
  • Work with the background-repeat property.
  • Work with the overflow property.
  • Work with the background-attachment property.
  • Work with the background-position property.
  • Work with the background-size property.
  • Work with the background-origin property.
  • Work with the background-clip property.
  • Work with the background property.

background-color

The background-color property sets the background color of an element. background-color can take any of the color values we discussed in the Color and Opacity Lesson.

Code Sample:

Backgrounds/Demos/background-color-styles.css
/* The "box" class is used for display purposes only */
.box { 
  border: 1px solid black;
  float: left; /* allows boxes to be side by side */
  height: 100px;
  padding: 1rem;
  margin: 1rem;
  width: 200px;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: #345;
}

#div3 {
  background-color: rgba(6, 114, 6, 0.2);
}

#div4 {
  background-color: hsl(230, 50%, 70%);
}

Code Sample:

Backgrounds/Demos/background-color.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>background-color</h1>
  <div id="div1" class="box">
    background-color: red;
  </div>
  <div id="div2" class="box">
    background-color: #345;
  </div>
  <div id="div3" class="box">
    background-color: rgba(6, 114, 6, 0.2);
  </div>
  <div id="div4" class="box">
    background-color: hsl(230, 50%, 70%);
  </div>
</body>
</html>

Code Explanation

The code above will render the following:background-color Demo

background-image

The background-image property sets a background image for an element. background-image takes a path to an image file. The borders of the element are drawn on top of the background image, and the background color is drawn below it. By default, a background image will repeat until it fills up the entire background of the element. In the following demo, we will use a single star as a background image: Background Star

Gradient Values

background-image also takes gradient values. See Mozilla's <gradient> (https://developer.mozilla.org/en-US/docs/Web/CSS/gradient).

Code Sample:

Backgrounds/Demos/background-image-styles.css
/* The "box" class is used for display purposes only */
.box {
  border: 1px solid black;
  font-weight: bold;
  height: 150px;
  padding: 1rem;
  margin: 1rem;
  width: 300px;
}

#div1 {
  background-image: url(images/star.png);
}

Code Sample:

Backgrounds/Demos/background-image.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>background-image</h1>
  <div id="div1" class="box">
    background-image: url(images/star.png);
  </div>
</body>
</html>

Code Explanation

The code above will render the following:background-image Demo

background-repeat

The background-repeat property sets how background images are repeated. background-repeat takes the following values:

  1. repeat - The default value. The image is repeated as much as needed to cover the whole background. The last images may be clipped if they don't fit.
  2. space - The image is repeated as much as much as possible without clipping, and the extra white space is distributed evenly between all the images.
  3. round - The repeated images are stretched to fill the space, so that there are no gaps between the images.
  4. no-repeat - The image is not repeated.

background-repeat can take one or two of the above values.

  1. If one value is specified, it applies to how the image repeats horizontally and vertically.
  2. If two values are specified, the first value refers to how the image repeats horizontally and the second value refers to how the images repeat vertically.
  3. To repeat an image horizontally, but not vertically, the single value repeat-x can be used instead of two values (repeat no-repeat).
  4. To repeat an image vertically, but not horizontally, the single value repeat-y can be used instead of two values (no-repeat repeat).

Code Sample:

Backgrounds/Demos/background-repeat-styles.css
/* The "box" class is used  for display purposes only */
.box {
  background-image: url(images/circle.png);
  border: 1px solid black;
  float: left; /* allows boxes to be side by side */
  font-weight: bold;
  height: 100px;
  padding: 1rem;
  margin: 1rem;
  width: 235px;
}

#repeat {
  background-repeat: repeat;
}

#space {
  background-repeat: space;
}

#round {
  background-repeat: round;
}

#no-repeat {
  background-repeat: no-repeat;
}

#repeat-x {
  background-repeat: repeat-x;
}

#repeat-y {
  background-repeat: repeat-y;
}

#repeat-space {
  background-repeat: repeat space;
}

Code Sample:

Backgrounds/Demos/background-repeat.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>background-repeat</h1>
  <div id="repeat" class="box">
      background-repeat: repeat;
  </div>
  <div id="space" class="box">
    background-repeat: space;
  </div>
  <div id="round" class="box">
    background-repeat: round;
  </div>
  <div id="no-repeat" class="box">
    background-repeat: no-repeat;
  </div>
  <div id="repeat-x" class="box">
    background-repeat: repeat-x;
  </div>
  <div id="repeat-y" class="box">
    background-repeat: repeat-y;
  </div>
  <div id="repeat-space" class="box">
    background-repeat: repeat space;
  </div>
</body>
</html>

Code Explanation

The code above will render the following:background-repeat Demo

overflow

The overflow property sets what happens when the content of a container element is too big for that element. It takes one of the following values:

  1. visible - The default value. The content is not clipped and overflows outside of the container.
  2. hidden - The content is cut off to fit inside the container.
  3. scroll - The content is cut off to fit inside the container, and a scroll bar is added to allow the user to scroll to see the content.
  4. auto - If the content fits, no scroll bar is added, but if it doesn't fit, then an appropriate scroll bar is added.

Code Sample:

Backgrounds/Demos/overflow-styles.css
/* The "box" class is used for display purposes only */
.box {
  border: 1px solid black;
  float: left;
  height: 200px;
  margin: 0 0 4rem 0.5rem;
  width: 45%;
}

#visible {
  overflow: visible;
}

#hidden {
  overflow: hidden;
}

#scroll {
  overflow: scroll;
}

#auto {
  overflow: auto;
}

Code Sample:

Backgrounds/Demos/overflow.html
---- C O D E   O M I T T E D ----
<body class="webucator">
<h1>overflow</h1>
  <div id="visible" class="box">
    <strong>visible</strong>
    <p>Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. 
      Praesent viverra dictum purus, 
      ac iaculis mi maximus nec. 
      
---- C O D E   O M I T T E D ----

    </p>
  </div>
  <div id="hidden" class="box">
    <strong>hidden</strong>
    <p>Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. 
      Praesent viverra dictum purus, 
      ac iaculis mi maximus nec. 
      
---- C O D E   O M I T T E D ----

    </p>
  </div>
  <div id="scroll" class="box">
    <strong>scroll</strong>
    <p>Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. 
      Praesent viverra dictum purus, 
      ac iaculis mi maximus nec. 
      
---- C O D E   O M I T T E D ----

    </p>
  </div>
  <div id="auto" class="box">
    <strong>auto</strong>
    <p>Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. 
      Praesent viverra dictum purus, 
      ac iaculis mi maximus nec. 
      
---- C O D E   O M I T T E D ----

    </p>
  </div>
</body>
</html>

Code Explanation

The code above will render the following: overflow Demo

background-attachment

The background-attachment property sets whether the background image scrolls with its element or is fixed relative to the viewport. Possible values are:

  1. scroll - The default value. The background image is fixed relative to and scrolls with its element.
  2. fixed - The background image is fixed relative to the viewport, so it will not move with its element.
  3. local - The background image is fixed to the contents of its element. This means that if the element has a scrolling device, the image will scroll with the contents, which differentiates local from scroll.

Code Sample:

Backgrounds/Demos/background-attachment-styles.css
/* The "container" id is used for display purposes only */
#container{
  border: 1px solid black;
  height: 400px;
  overflow: auto;
  width: 300px;
}

/* The "box" class is used for display purposes only */
.box {
  background-repeat: repeat-y;
  border: 1px solid black;
  height: 100px;
  margin: 1rem;
  padding: 1rem;
  overflow: auto;
  width: 200px;
}

#scroll {
  background-attachment: scroll;
  background-image: url(images/circle.png);
}

#fixed {
  background-attachment: fixed;
  background-image: url(images/circle.png);
}

#local {
  background-attachment: local;
  background-image: url(images/circle.png);
}

A few things to note:

  1. We created a container div with a scrolling device to hold the scroll, fixed, and local div elements.
  2. We used strong tags as labels for each inner div.

Code Sample:

Backgrounds/Demos/background-attachment.html
---- C O D E   O M I T T E D ----
<body class="webucator">
<h1>background-attachment</h1>
<div id="container">
  <strong>background-attachment: scroll;</strong>
  <div id="scroll" class="box">
    <p>Notice that:</p> 
    <ol>
      <li>The background image moves when 
        the "container" div is scrolled.</li>
      <li>The background image does not move when 
        this div is scrolled.</li>
    </ol>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

---- C O D E   O M I T T E D ----
    </p>
  </div>
  <strong>background-attachment: fixed;</strong>
  <div id="fixed" class="box">
    <p>Notice that:</p> 
    <ol>
      <li>The background image does not move when 
        the "container" div is scrolled.</li>
      <li>The background image does not move when 
        this div is scrolled.</li>
    </ol>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

---- C O D E   O M I T T E D ----
    </p>
  </div>
  <strong>background-attachment: local;</strong>
  <div id="local" class="box">
    <p>Notice that:</p> 
    <ol>
      <li>The background image moves when 
        the "container" div is scrolled.</li>
      <li>The background image moves when 
        this div is scrolled.</li>
    </ol>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

---- C O D E   O M I T T E D ----
    </p>
  </div>
</div>
</body>
</html>

Code Explanation

The code above will render the following:background-attachment Demo

Open background-attachment.html in your browser and play with all the scrollbars to clearly see the different effects of scroll, fixed, and local.

background-position

The background-position property specifies the initial positions of the background images. These positions are relative to the area set by the background-origin property. There are two ways to specify background-position:

  1. Keywords
  2. Coordinates

Keywords

background-position takes the following keywords:

  1. center - centers the image.center
  2. top - centers the image horizontally and positions it against the top edge of the element.top
  3. bottom - centers the image horizontally and positions it against the bottom edge of the element.bottom
  4. left - centers the image vertically and positions it against the left edge of the element.left
  5. right - centers the image vertically and positions it against the right edge of the element.right

It is possible to use the keywords (except center) to specify different locations by adding offset values (either length values in units, or percentage values). For example:

background-position: top 10px left 10px;

This code would put the image 10px from the top and left edges of the element.top-left

background-position: bottom 10% right 10%;

This code would put the image 10% from the bottom and right edges of the element.bottom-right

background-position: bottom 10% center;

This code would put the image 10% from the bottom edge of the area specified by the element.bottom-center

When using offsets, you must always use two keywords, one for vertical positioning and one for horizontal positioning:

background-position: bottom 10%; /* not valid */
background-position: bottom 10% top 10%; /* not valid */

Coordinates

When using coordinates, the first value specified is the x-value and the second is the y-value. Both can be either length values in units or percentage values. They are relative to the top left corner of the element. For example:

background-position: 10px 10px;

This code would put the image 10px from the top and left edges of the element.x-y-pixels

background-position: 10% 10%;

This code would put the image 10% from the top and left edges of the element.x-y-percentage

It is possible to use keywords as coordinates, as you can see below:

background-position: 10% bottom;

x-y-percentage-bottom

background-position: right 20px;

Notice that this is not an offset. Keyword offsets must have two keywords. x-y-right-pixels

background-position: right bottom;

x-y-right-bottom

You can see all of these examples in Demos/background-position-styles.css and Demos/background-position.html.

Creating a "hint" Class

In the following demo, we use background-color, background-image, background-repeat, background-attachment, and background-position to create a "hint" class for adding callout-style hints to pages:

Code Sample:

Backgrounds/Demos/hint1-styles.css
body {
  background-color: hsl(0,0%,98%);
}

.hint {
  border: 1px solid black;
  border-radius: 10px;
  height: 200px;
  overflow: hidden; 
  width: 300px;
}

.hint .hint-title {
  font-size: 1.2em;
  margin-bottom: 0;
}

.hint .hint-content {
  background-attachment: scroll;
  background-color: #ffc;
  background-image: url(images/bulb.png);
  background-position: right 1.5em top 0;
  background-repeat: no-repeat;
  height: 100%;
  width: 85%;
  overflow: auto;
  padding: 0.5em 3.5em 0.5em 0.5em;
}

Code Sample:

Backgrounds/Demos/hint1.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>Hint</h1>
  <div class="hint">
    <div class="hint-content">
      <h1 class="hint-title">Hint Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Fusce feugiat, lectus vitae convallis ullamcorper, nunc sapien 
      
---- C O D E   O M I T T E D ----

      </p>
    </div>
  </div>
</body>
</html>

Code Explanation

The above code will render the following:Hint1 Demo

Open Backgrounds/Demos/hint1.html in your browser and scroll the hint. Notice that the light bulb stays in the box. What CSS property would you change to make it scroll with the rest of the content?

background-size

The background-size property specifies the size of the background image. background-size accepts the following possible values:

  • contain - Scales the image as big as possible without stretching or clipping it.contain
  • cover - Scales the image as big as possible without stretching it. If the proportions of the containing element don't match the image's proportions, it will be clipped.cover
  • A length value in units - The image stretches to the specified length. The first value is the width and the second value is the height.length
  • A percentage value - The image stretches to the specified percentage. The first value is the width and the second value is the height.percentage
  • auto - The default value. Conserves the original size of the image, unless a length or percentage is also specified. If auto is used with a length or percentage value (e.g., background-size: auto 80%;), then the height will be 80% and the width will expand or shrink to a value that conserves the original proportions of the image.auto auto-percentage

You can see all of these examples in Demos/background-style-styles.css and Demos/background-style.html.

background-origin

The background-origin property specifies the area of the element to which the background image is relative. background-origin takes the following values:

  1. border-box - The default value. The background image is relative to the edge of the border.
  2. padding-box - The background image is relative the edge of the padding.
  3. content-box - The background image is relative to the edge the content.

Code Sample:

Backgrounds/Demos/background-origin-styles.css
/* The "box" class is used for display purposes only */
.box {
  background-image: url(images/orange-background.png);
  background-repeat: no-repeat;
  border: 1rem double black;
  font-weight: bold;
  height: 100px;
  padding: 1rem;
  margin: 1rem;
  width: 150px;
}

#border-box {
  background-origin: border-box;
}

#padding-box {
  background-origin: padding-box;
}

#content-box {
  background-origin: content-box;
}

Code Sample:

Backgrounds/Demos/background-origin.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>background-origin</h1>
  <div id="border-box" class="box">
    background-origin: border-box;
  </div>
  <div id="padding-box" class="box">
    background-origin: padding-box;
  </div>
  <div id="content-box" class="box">
    background-origin: content-box;
  </div>
</body>
</html>

Code Explanation

The code above will render the following:background-origin Demo

background-clip

The background-clip property specifies the areas of the element under which the background color or image extends. background-clip takes the following values (the same values as background-origin):

  1. border-box - The default value. The background color or image extends to the edge of the border.
  2. padding-box - The background color or image extends to the edge of the padding.
  3. content-box - The background color or image extends to the edge of the content.

Code Sample:

Backgrounds/Demos/background-clip-styles.css
/* The "box" class is used for display purposes only */
.box {
  background-color: rgba(255, 0, 0, 50%);
  border: 1rem dotted black;
  font-weight: bold;
  height: 100px;
  padding: 1rem;
  margin: 1rem;
  width: 200px;
}

#border-box {
  background-clip: border-box;
}

#padding-box {
  background-clip: padding-box;
}

#content-box {
  background-clip: content-box;
}

Code Sample:

Backgrounds/Demos/background-clip.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>background-clip</h1>
  <div id="border-box" class="box">
    background-clip: border-box;
  </div>
  <div id="padding-box" class="box">
    background-clip: padding-box;
  </div>
  <div id="content-box" class="box">
    background-clip: content-box;
  </div>
</body>
</html>

Code Explanation

The code above will render the following:background-clip Demo

Modifying the "hint" Class

In the following demo, we use background-size and background-clip to modify our "hint" class.

Code Sample:

Backgrounds/Demos/hint2-styles.css
body {
  background-color: hsl(0,0%,98%);
}

.hint {
  background-color: white;
  border: 1px solid black;
  border-radius: 10px;
  height: 200px;
  padding: 1em;
  width: 300px;
}

.hint .hint-title {
  background-image: url(images/bulb.png);
  background-position: right 0.5em top 0;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 1.2em;
  margin: .5em .5em 0 .5em;
  padding: .1em;
}

.hint .hint-content {
  background-clip: padding-box;
               background-color: #ffc;
  border: double .5em rgba(0,102,255,.1);
  border-radius: 10px;
  height: 80%;
  overflow: auto;
  padding: 0 1em;
}

Code Sample:

Backgrounds/Demos/hint2.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>Hint2</h1>
  <div class="hint">
    <h1 class="hint-title">Hint Title</h1>
    <div class="hint-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Fusce feugiat, lectus vitae convallis ullamcorper, nunc sapien 
      
---- C O D E   O M I T T E D ----

      </p>
    </div>
  </div>
</body>
</html>

Code Explanation

The above code will render the following:Hint2 Demo

Things to note:

  1. In the HTML, we moved the "hint-title" h1 out of and above the "hint-content" div, so the heading stays present when the content is scrolled.
  2. We moved the light bulb background image and associated properties from the "hint-content" to the "hint-title" class.
  3. Open Backgrounds/Demos/hint2.html in your browser. Notice that the yellow background does not extend to the outside border. The space between the two lines in the double border is white. What property would you change to make the yellow background cover that space as well?

background

The background property is the shorthand property for all of the background properties covered in this lesson. The simplified syntax for background is shown below. Note that the background-image and background-color properties are required:

Syntax

background: background-image and/or background-color
            background-attachment
            background-origin
            background-clip
            background-position/background-size
            background-repeat;

Some notes:

  1. You must include either a background-image value or background-color value (or both).
  2. If a background-size value is specified, it must come directly after the background-position separated by a forward slash (/).
  3. Since the background-origin and background-clip values are the same (border-box, padding-box, and content-box), if one value is specified, it applies to both, and if two values are specified, the first applies to background-origin and the second applies to background-clip.

Shorthand Defaults

As with any shorthand property, any unspecified values will be set to their default values.

Code Sample:

Backgrounds/Demos/background-styles.css
/* The "box" class is used for display purposes only */
.box {
  border: 1rem dashed black;
  float: left; /* allows boxes to be side by side */
  font-weight: bold;
  height: 100px;
  padding: 1rem;
  margin: 1rem;
  width: 200px;
}

#div1 {
  background: url(images/orange-background.png) padding-box;
}

#div2 {
  background: url(images/star.png) space content-box;
}

#div3 {
  background: url(images/circle.png) no-repeat center/50%;
}

Code Sample:

Backgrounds/Demos/background.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>background</h1>
  <div id="div1" class="box">
    background: url(images/orange-background.png) padding-box;
  </div>
  <div id="div2" class="box">
    background: url(images/star.png) space content-box;
  </div>
  <div id="div3" class="box">
    background: url(images/circle.png) no-repeat center/50%;
  </div>
</body>
</html>

Code Explanation

The code above will render the following:background Demo

Backgrounds

Duration: 25 to 40 minutes.

In this exercise, you will continue to work on the Runners Home page.

  1. Open Backgrounds/Exercises/index.html in your editor. You will see the homepage for a website called Runners Home.
  2. Open Backgrounds/Exercises/styles.css. This is the stylesheet from the solution to the Borders, Margins, and Padding exercise. Feel free to continue working from your own stylesheet.
  3. Using your new knowledge of backgrounds add some styles to this page. The object of this exercise is to practice using the background properties you just learned. Also, feel free to add or change any other properties that you know.
  4. When you are done, open index.html in your browser to see the results. You are welcome to go back to the code and continue to work.

You can design it however you like, or you can try to make it look something like:Backgrounds Solution The running image is in the Exercises/images folder. You are welcome to use other images that you download or own.

Solution:

Backgrounds/Solutions/styles.css
html {
  font-size: 16px;
}

body {
  background-image: url(images/runners.png);
  background-size: cover;
  font: 1rem/1.3 Verdana, Geneva, Tahoma, sans-serif;
}

nav {
  background: url(images/runner.png) no-repeat bottom right;
  background-color: white;
  border: solid rgb(110, 78, 226) 0.1rem;
  border-radius: 1rem;
  box-shadow: 0.5rem 0.5rem 1rem rgb(110, 78, 226, .5);
  margin: 1rem;
  width: 40%;
}

nav a {
  text-decoration: none;
}

main {
  background: rgba(232, 232, 232, 0.8);
  padding: 2%;
  max-width: 1000px;
  min-width: 750px;
}

#welcome {
  font-size: larger;
}

#welcome h1 {
  color: rgb(8, 5, 211);
  text-shadow: 0.2rem 0.2rem 0.1rem rgb(211, 200, 238);
}

article {
  background: white;
  border: 1px ridge rgb(226, 77, 40);
  box-sizing: border-box;
  margin: 1em auto;
  padding: 1rem;
  max-width: 75%;
  text-align: center;
}

article h2 {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  word-spacing: 0.2em;
}

article p {
  line-height: 2;
  text-align: left;
  text-indent: 3rem;
}

.read-more {
  text-decoration: none;
}

aside label {
  font-weight: bold;
}

#newsletter {
  background: white;
  border: 1px dashed rgb(110, 78, 226);
  border-radius: 1em;
  margin: 0 1rem;
  padding: .5rem 1rem;
  text-align: right;
}

footer {
  font-size: smaller;
  font-style: italic;
  margin: 1rem;
}