CSS: Creating trailing dots after the heading where the heading is placed on a background

Question

Please take a look at the attached screenshot. I'm trying to create this effect in CSS.

The trailing dots need to cover the entire width of the element (100%) and be responsive. Please note that the header is placed on a background, so the following technique did not work for me, because when I give the span a background of white, the underlying pattern is no longer visible.

fiddle

<style type="text/css">
body{background: red;}
h1{background: url(http://i.stack.imgur.com/23XVz.png) repeat-x 0 0 transparent;}
h1 span{background: #fff;}
</style>

<h1><span>SERVICE</span></h1>

Answer 1

You can get this effect using display table-cell

body {
    background: red;
}
h1 {
    display: table-cell;
    padding-right: 10px;
}
span {
    width: 100%;
    display: table-cell;
    background: url(http://i.stack.imgur.com/23XVz.png) repeat-x 0 center;
}

fiddle

Answer 2

Try this:

<h1>Service<span></span></h1>

Css:

h1 span {
   display: inline-block;
   background: url(dots.gif) repeat-x 0 0 transparent
}

Here's two examples: example 1, example 2.

Edit:

Here is exmaple 3 with you dashed image.

Answer 3

Its due to the positioning of your background image, try:

h1{background: url(dots.gif) repeat-x center center transparent;}

http://jsfiddle.net/bh5XN/