CSS “background-overflow”

Looking behind the mask of CSS backgrounds.

If you’ve been developing modern websites for any length of time I’d be surprised if you hadn’t run into a little CSS1 property named ‘background’. In fact, it may have been the first property you memorized the shorthand syntax for;

background: #bada55 url("kittens.jpg") repeat-y 100px 100px / 120px 80px fixed;

Ah, yes — that’s our best pal and all his friends; background.

Lately, I've begun to wonder if background is complete. You see, when backgrounds are applied to an element, they may only be rendered within the box of the element. Here are a few examples;

The box with the ‘x’ represents the bounding box of an element. I’ve show the portion of the background-image outside of the box with reduced opacity.

You may be thinking, “Sure, we know this already! Why would you want this to be any different?” It’s because I believe backgrounds would be more valuable if they were able to break through this barrier. Take this for example;

How would you write markup for this example? The quote and its author are simple — just pop in a <blockquote>, a <footer>, and a <cite> element.

Easy-mode.

<blockquote>
<p>In three words I can sum up everything I've learned about life: it goes on.</p>
<footer>
  —  <cite>Robert Frost</cite>
</footer>
</blockquote>

You’d add some simple styling to this and be 98% of the way to beautiful pull-quotes. But there’s a gotcha — that pesky curly double-quote hangs in your way. Psuedo elements can save us here;

blockquote::before {
content: '';
position: absolute;
top: 0;
right: 100%;
width: 100px;
height: 80px;
padding-right: 1em;
background: url('fancy-quote.png') no-repeat top left;
...type styles...
}

Sure, you could also place a double-quote in that generated content attribute, but I’m trying to make a point here.

Background-overflow to the rescue!

This I what I believe we could do with “background-overflow”;

Green borders represent DOM elements.
The purple box represents a background image.

blockquote {
  background-image: url('fancy-quote.png');
  background-overflow: visible;
  background-position: -100px top;
}

Voila! Easy, right? What else could we do with this?

I recently ran across a challenge like this;

Imagine the image of batman needs to change for some reason. You could use server-side image processing to “bake-in” the splash of green, but you may have some constraint where the design calls for text that aligns with the top of batman’s image. You could apply negative margins to batman, or padding to your text, or something else equally cumbersome.

Or you could just do this;

<div class="image-container">
<img src="batman.png" alt="It's not who I am underneath, but what I do that defines me." />
</div>
.image-container {
background: url('green_splash.png') no-repeat center;
background-overflow: visible;
}

Wouldn’t that be nicer?

In Closing

I’ve run into a few issues over the past few months where I felt that background-overflow would be the best tool to tackle a problem. I’ve outlined a few use-cases in this post, but I’m curious as to what uses of background-overflow the community might identify.

Also, perhaps background-overflow could be written in a way to allow solid colors to render outside of the box for a certain distance. Imagine this;

.test-chamber {
width: 100px;
height: 100px;
border: 1px solid black;
background: #B0ABD6;
background-size: 140px 120px;
background-position: 10px 20px;
background-overflow: visible;
}

After nearly 10 years of writing CSS I’m pretty surprised I haven’t seen this discussed or written into the specifications. I, for one, would love to start using ‘background-overflow’ today — along with ‘background-transform’ (but that’s for another post).