Question

I want to ask if is it possible to declare more than one background position for the same background image.

I have a span with class named page_heading and I wand this class to show the same image two times, one time in the beginning of the text and one time at the end of it.

HTML:

<h1><span class="page_heading">Text</span></h1>

CSS:

.page_heading {
  padding: 0 30px 0 30px;
  background: #ff6600;
  background: #ff6600 url('../img/star.png') no-repeat 0 50%;
}

I would like to do this (I know this is not right, just to understand):

.page_heading {
  padding: 0 30px 0 30px;
  background: #ff6600;
  background: #ff6600 url('../img/star.png') no-repeat 0 50%;
  background: #ff6600 url('../img/star.png') no-repeat 100% 50%;
}

Answer 1

You can use the CSS3 feature of multiple backgrounds which will do exactly what you need (browser support is not bad too).

background: url('../img/star.png') no-repeat 0 50%,
            url('../img/star.png') no-repeat 100% 50%;
background-color: #ff6600 

The problem with this solution is that there is no way to achieve the same effect in non-conformant browsers with straight CSS. Fallback measures that you can consider are modifying the DOM structure to include another wrapper element that will take one of the backgrounds in HTML, or doing the same with Javascript. In the latter case, be aware that IE8 (if I remember correctly) rejects the whole of the background property if it cannot parse it. So you would have CSS like

/* IE8: at least get one of the backgrounds */
background: url('../img/star.png') no-repeat 0 50%;

/* CSS3 conformant browsers: both backgrounds; IE8 ignores this completely */
background: url('../img/star.png') no-repeat 0 50%,
            url('../img/star.png') no-repeat 100% 50%;