Background color and background image below element

Question

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.

Fiddle here

HTML:

<span class="wpcf7-not-valid-tip">Please fill the required field.</span>

CSS:

.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');  
}

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.

QUESTION:

Is there a pure CSS solution?

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?

Answer 1

Got the answer elsewhere.Will accept unless someone can think of something better.

http://jsfiddle.net/D2KFX/2/

This works perfectly using CSS (albeit adding content with the content: declaration) by drawing a triangle with borders instead of using an image for it.

CSS

.wpcf7-not-valid-tip {
        background: red;
        color: white;
        padding: 10px;
        width: 100px;
}
/* Updated code */
.wpcf7-not-valid-tip {
    position: relative;
}
.wpcf7-not-valid-tip:after {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 0, 0, 0);
    border-top-color: red;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
}