How to use a specific position from an image as background?

Question

I'm trying to use a specific position from an image as background of a div.

The source is here https://i.sstatic.net/cYkRs.jpg

I want to use one of the colored squares as the background of the entire div and on the corners the round ones. But I have no idea how to do that. The only thing that I can find is how to use an entire image as background, like:

.paragraph-container .paragraph-background {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('/assets/images/panel_beige.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

The key property is background-position: <x_position> <y_position>. The origin of the background image is top-left. A negative <x_position> value will move the image left, a negative <y_position> value will move the image up. Run the snippet to see the examples. Both shapes were constructed by combining sections of your sprite sheet image. In order to achieve what you're looking for, you need to match the width and height of the HTML element to the width and height of the section of the sprite you're interested in as well as the coordinates of that section.

/* Apply sprite sheet to all elements with class "sprite" */
.sprite{background-image: url(https://i.sstatic.net/I7KCe.png)}

/* Box */
[class*=box_section]{float: left; width:16px; height:16px;}
[class*=box_row]{clear:both;}
.box_section__top_left{background-position: -324px -36px;}
.box_section__top_middle{background-position: -342px -36px;}
.box_section__top_right{background-position: -360px -36px;}
.box_section__middle_left{background-position: -324px -54px;}
.box_section__middle_middle{background-position: -342px -54px;}
.box_section__middle_right{background-position: -360px -54px;}
.box_section__bottom_left{background-position: -324px -72px;}
.box_section__bottom_middle{background-position: -342px -72px;}
.box_section__bottom_right{background-position: -360px -72px;}

/* Bar */
.bar{margin-top: 10px; float:left; clear: both;}
[class*=bar_section]{float: left;}
.bar_section__left, .bar_section__right{width: 3px; height: 12px;}
.bar_section__left{background-position: -463px -290px;}
.bar_section__middle{
  width: 16px;
  height: 12px;
  background-position: -468px -290px;
}
.bar_section__right{background-position: -486px -290px;}

<div class='box'>
  <div class='box_row__top'>
    <div class='sprite box_section__top_left'></div>
    <div class='sprite box_section__top_middle'></div>
    <div class='sprite box_section__top_middle'></div>
    <div class='sprite box_section__top_middle'></div>
    <div class='sprite box_section__top_middle'></div>
    <div class='sprite box_section__top_middle'></div>
    <div class='sprite box_section__top_right'></div>
  </div>
  <div class='box_row__middle'>
    <div class='sprite box_section__middle_left'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_right'></div>
  </div>
  <div class='box_row__middle'>
    <div class='sprite box_section__middle_left'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_right'></div>
  </div>
  <div class='box_row__middle'>
    <div class='sprite box_section__middle_left'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_right'></div>
  </div>
  <div class='box_row__middle'>
    <div class='sprite box_section__middle_left'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_right'></div>
  </div>
  <div class='box_row__middle'>
    <div class='sprite box_section__middle_left'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_right'></div>
  </div>
  <div class='box_row__bottom'>
    <div class='sprite box_section__bottom_left'></div>
    <div class='sprite box_section__bottom_middle'></div>
    <div class='sprite box_section__bottom_middle'></div>
    <div class='sprite box_section__bottom_middle'></div>
    <div class='sprite box_section__bottom_middle'></div>
    <div class='sprite box_section__bottom_middle'></div>
    <div class='sprite box_section__bottom_right'></div>
  </div>
</div>

<div class='bar'>
  <div class='sprite bar_section__left'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__right'></div>
</div>