Question

Scenario

html

<div id='fractal'>
  <div class='centerdotline'>
    <span>Some text</span>
  </div>
</div>

css

#fractal {
 background-image:url('fractal.jpg');
 background-repeat: repeat;
}
.centerdotline {
 background-image:url('dotline.png'); /* with alpha channel */
 background-repeat: repeat-x;
 background-position: center;
}
.centerdotline span {
 padding: 0 20px;

 /*
 override centerdotline background-image
 */
}

I want to remove centerdotline div ( parent ) background-image but not fractal div background-image.
I can’t set the background-image in this element (like a piece of fractal.jpg) because I don’t know the element’s exact position in relation to the fractal div

Thanks for help

Marco

Answer 1

Perhaps This Workaround

Not knowing specifically what your parameters are, the following solution may or may not be useful to you. I offer it, however, in case it is useful for your situation.

Here is the fiddle example. HTML is just as you had it. I removed the line-height on the span that you said was not necessary. If you were doing that, you would need to adjust the pseudo-element height accordingly below. That height should roughly match line-height, which is typically about 1.1 or 1.2, but if set to 500px would need to be that height for the pseudo-elements.

CSS

#fractal {
    background-image:url('http://marcomolina.com.br/lab/fractal.jpg');
    background-repeat: repeat;
    width:500px;
    height:500px;  
}
.centerdotline {
    position: relative; /* using this to place the dots */
    text-align:center;
}

/* your span can also be set to display: inline-block and have top padding or margin */
.centerdotline span {
    padding: 0 20px;

 /*
 Did not remove, but skipped centerdotline background image by not putting the background there to keep the background of fractal div behind the text
 */
}

/* put the dots in pseudo-elements and position off .centerdotline edges */

.centerdotline span:before,
.centerdotline span:after {
    content: '';
    position: absolute;
    height: 1.2em; /* this might vary slightly by font chosen */
    width: 40%; /* this will vary by text size */
    background-image:url('http://marcomolina.com.br/lab/dotline.png'); /* with alpha channel */
    background-repeat: repeat-x;
    background-position: center;
}

.centerdotline span:before {
    left: 0;
}

.centerdotline span:after{
    right: 0;
}