Let's go straight to the thing: have you ever wanted or needed to do something like this?

I came up with a particular solution while working on Cloud Studio project (watch the line "Making web and mobile technologies happen"). There is a texture in the background and the website is designed responsively. So what would we do?

Typical Background-Dependent Solution

This is probably the most common heading (or other text block) bars solution which I believe you have used at least a couple of times in your projects. Here's how this typical situation usually goes in code:

HTML

<div>
    <h1>
        <span>
            Heading Bars
        </span>
    </h1>
</div>

CSS

div
{
    background-color: #fff;
}

h1
{
    background-color: #000;
}

span
{
    background-color: #fff; /* the same as div's */
    padding: 0 10px;
}

Obviously, the code is only effective when you have a solid color in the background. Moreover, you are relatively limited on the appearance of a bar. And yes, extra inner HTML (<span>) is evil if you care about the semantics. But what if you want to push an image or a gradient in the background?

Background-Independent Model

Great, now let's transform the code above into this:

HTML

<div>
    <h1>
        Heading Bars
    </h1>
</div>

CSS

div
{
    background-image: url( 'wallpaper.jpg' );
}

h1
{
    position: relative;
    padding: 0 26%;
}

    h1:before,
    h1:after
    {
        width: 25%;
        background-color: rgba( 0, 0, 0, .5 );
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
    }

CSS pseudo-element :before stands for the left and :after for the right bar. To better understand the model, have a look at the scheme below:

As you see, subtraction of pseudo-element's width and element's horizontal padding (left or right) is a minimal gap between the bar and the content. Keep padding greater than width to make sure the gap does not overlap the content.

View demo

Summarize

• Independence of  the background;
• Highly customizable appearance;
• Perfectly works in responsive environments.

Because there's no smoke without fire, the model may have a disadvantage in some situations if compared to background-dependent solution. It's a non-persistent gap between content and bars. The wider heading, the wider gap.

Browser Support

How the model works in different browsers depends only on how they do support :before and :after pseudo-elements. Everything goes fine in recent modern browsers, however, it would collapse in IE7 and down. Luckily, there is a great JavaScript fallback (used in demo) written by a very good people – IE7.js.

The Last Bit

Before discovering this method, I found Chris Coyier's Full Browser Width Bars which may also appear to be useful for you.