Background image (template) after the header using only CSS

Question

Is it possible to create the following effect using CSS. I only have the H2 element in HTML, and I have no control over the HTML page of the page. I can only change CSS.

I tried this with: before and: after, but haven't achieved anything so far.

This will be used in the CMS, so I cannot be sure how and where the end user will add headers.

Answer 1

, ( - HTML CSS-) z- h2: :

HTML

<div id="wrapper">
    <h2 class="heading">New Collection </h2>
</div>

CSS

#wrapper {
    width:100%;
    height:800px;
    background:green;
    position:relative;
    z-index:-2;
}
.heading {
    display:inline;
    background:green;
}
.heading:after {
    content:'';
    display:inline-block;
    width:100%;
    height:20px;
    background:#d3d3d3;
    position:absolute;
    right:0;
    z-index:-1;
}

FIDDLE, , , , , CSS.

, .

Answer 2

, , - H2, , H2.

: jQuery H2.

HTML:

<h2><span>New Collection</span></h2>

CSS

h2 {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 16px;
    background: #eee;
    color: #999;
}
h2 span {
    padding-right: 10px;
    background: #fff;
}

JQuery

$(document).ready(function() {
    $('h2').each(function() {
        var title = $(this).html();
        $(this).html('<span>' + title + '</span>');
    });
});