Overriding / Removing Background Image from Parent

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 the centerdotline div (parent) background image, but not the fractal div background-image.
I cannot set the background image in this element (for example, fragment fractal.jpg), because I do not know the exact position of the element relative to the fractal div

thanks for the help

Marco

Answer 1

Maybe this is a workaround

Not knowing specifically what your options are, the following solution may or may not be useful to you. However, I suggest it if it is useful for your situation.

Here is an example script . HTML is the same as yours. I removed the line-height on the span , which, as you said, was not necessary. If you do this, you will need to adjust the height pseudo-element accordingly. This height should roughly correspond to the line-height , which is usually 1.1 or 1.2 , but if set to 500px , it should be height for 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; }