StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBackground color and background image below element
text
Body
copied!<p>The idea was to make the not valid error tip that comes up when people fail to fill out a required field show up like a speech bubble. So the arrowhead image shows in the center and underneath the text and would point into the field that they missed. </p> <p><a href="http://jsfiddle.net/Dean_Wilson/D2KFX/1/" rel="nofollow">Fiddle here</a></p> <p><strong>HTML:</strong></p> <pre><code><span class="wpcf7-not-valid-tip">Please fill the required field.</span> </code></pre> <p><strong>CSS:</strong></p> <pre><code>.wpcf7-not-valid-tip { background: red; color: white; padding: 10px; width: 100px; background-position: 0 0; background-repeat: no-repeat; background-image: url('http://s24.postimg.org/qacevkf7l/green_error_arrow.png'); } </code></pre> <p>As you can see I have a background color and the arrow image that needs to sit in the middle of the element and below it but, of course, if you position it using background-position, the image is hidden as it cannot overflow outside of the element itself. This would be easy if I could easily edit the HTML but I would prefer not to as I am using a plugin and want to be free to update the plugin in the future. </p> <p><strong>QUESTION:</strong></p> <p>Is there a pure CSS solution?</p> <p>If not (and I suspect there isnt) what is the cleanest way to solve this issue? Would I use add_filter to alter the html to put a div around the tooltip that i could then add the bg image to? Something with css "content:", a js solution? </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload