I am currently working on styling an h2 element with a 2px background image. My goal is to have the image start right after the text in the h2 and repeat horizontally for the rest of the space within the h2. However, due to varying word lengths, I cannot simply set a static image in the HTML.
While I have managed to get the background image to repeat along the x-axis, it unfortunately goes behind the text, which is not the desired outcome.
Is there a way to either 1. make the image start repeating immediately after the text, or 2. achieve this task using a different approach?
You can view my current progress on this jsfiddle.
Here is the relevant CSS code:
h2{
color:#253b74;
font-size:16px;
background-image:url('http://s8.postimg.org/ke8tx8jhd/hr_03.png');
background-repeat:repeat-x;
background-position:100% 50%;
}
And the HTML code:
<h2>PRODUCT IMAGE</h2>