Search code examples
htmlcsspseudo-class

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

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

enter image description here

enter image description here

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

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

  • 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(https://i.sstatic.net/23XVz.png) repeat-x 0 center;
}

    fiddle