css breadcrumbs using an image sprite -

I have an image and I have to use it as a breadcrumb background image. I tried, but it is unlikely to come in the right way. I have made a bela for it. Can someone help me what I am doing wrong? I do not want to change the HTML because the same file is also being used in other applications. Only CSS, I can change

HTML

  & lt; Div id = "itemDisplay" & gt; & Lt; A href = "www.abc.com" class = "step1only" gt; & Lt; Span id = "step1" class = "step_on" title = "home" & gt; Home & lt; / Span & gt; & Lt; / A & gt; & Lt; Span id = "step2" class = "step_off" title = "vehicle" & gt; Vehicle & lt; / Span & gt; & Lt; Span id = "step3" class = "step_off" title = "van and trucks" & gt; Van & amp; amp; Amp; Amp; From the truck & lt; / Span & gt; & Lt; Span id = "step4" class = "step_off" title = "wagon" & gt; Wanagan & lt; / Span & gt; & Lt; / Div & gt;  

I have attached an image that how the actual breadcrumb should look like

The alignment of text in my Bela is not correct except for the first lesson Text should be aligned to the left Besides, the last breadcrumbs are not correct. When the user is on the first page, then only the first breadcrumb text should be bold, when he goes to the second page, then the second should be bold.

Please advise

I have added . Active class so that you can use it on span on the required page I can see the span.step_off