我担心这是不可能的，以限制可视区域的精灵图像，除非元素本身的大小是有限的。
然而，也许你可以将背景图像分配给::before和::after伪元素，它们被正确地定位在父框的左侧/右侧（通过float或absolute定位）。
这样你就可以独立地处理每个图标的位置。
例如：

.box:before, .box:after {
  content: "";
  display: inline-block; /* or position these elements by floats, etc. */
  width: 48px;           /* for instance */
  height: 48px;          /* for instance */
 }

.box:before {
  background: url(../images/png/elements.png) no-repeat -5px -152px;
}

.box:after {
  background: url(../images/png/elements.png) no-repeat -5px -104px;
}

<div class="box"></div>

您正在使用的left和right属于background-position。像素定义覆盖了它们。
你应该把图像分成两个不同的元素。

不要使用Shorthand（特别是在position属性中）：
试着用这样的东西：

div {
    width: 100%;
    height: 190px;
    border: 1px solid red;
    background: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
    background-position: left top, right bottom;
    background-repeat: no-repeat;
}

<div></div>

编辑：像素、零和%的示例。

div {
    width: 100%;
    height: 190px;
    border: 1px solid red;
    background-image: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
    background-position: 0 0, 100% -1215px;
    background-repeat: no-repeat;
}

<div></div>

section.homepage.customer{
    background-image: url('/assets/img/homepage/top-left.png'), url('/assets/img/homepage/bottom-right.png');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 672px;
}