Text over the top of a border-image: Using the border as an expandable background


I'm trying to create an expandable background image for some text. The border-image property gives me almost exactly what I want. The problem is I don't really want a border, more that the border becomes the background for the content (specifically I like the fixed resolution edges and stretching centre). Setting height to zero gives the exact background I want, unfortunately the text is dropped below the centre:

height: 0px;
display: inline-block;
font-size: 100pt;
border: 149px;
border-image: url('img.png') 149 149 stretch;

EDIT: for firefox border: solid 149px;


  1. What's the simplest way to shift the text back up?
  2. Is there a simple way to add a negative offset to the width to bring the border sides in?

This is a great example where I believe negative padding would provide a perfect solution.

I'm aware there's many other ways to achieve the same result (eg a standard background image and two elements either side), but I'm after something small and simple.

Problem courtesy of: jozxyqk


You could use line-height:


div {
    height: 0px;
    display: inline-block;
    font-size: 100pt;
    border: 149px;
    border-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Button_Icon_GreenBlue.svg/300px-Button_Icon_GreenBlue.svg.png') 149 149 stretch;
    line-height: 20px;
Solution courtesy of: Jonas Giuro


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.