StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POButton using three (3) background images css
text
Body
copied!<p>I'm trying to make a button using three background images so that we can pull in translations for the the text of the button and expand nicely. We'll probably add a base style for IE8 but our designer wants us to use this style and we couldn't recreate it nicely with pure CSS3.</p> <p>Here are the images:<br> <img src="https://i.stack.imgur.com/6m2HC.png" alt="Button front end"> <img src="https://i.stack.imgur.com/DaQcG.png" alt="Tiny middle piece to repeat"> <img src="https://i.stack.imgur.com/2WA5B.png" alt="Button rounded end piece"></p> <p>Here's the HTML (just a simple button, but thought I should put it anyway:</p> <pre class="lang-html prettyprint-override"><code><button class="back clickable" aria-label="Back" onclick="javascript:history.back();">Back</button> </code></pre> <p>I've already tried a couple of things; I'll paste the CSS of both attempts.</p> <p>Attempt 1: Using Pseudo-selectors<br> <a href="http://jsfiddle.net/c2B6X/" rel="nofollow noreferrer">http://jsfiddle.net/c2B6X/</a></p> <pre class="lang-css prettyprint-override"><code>.back { background: url("images/back-middle.png") 14px 0 repeat-x; color: $white; height: 28px; padding: 5px; &:before { background: url("images/back-front.png") 0 0 no-repeat; width: 14px; } &:after { background: url("images/back-end.png") 100% 0 no-repeat; width: 8px; } } </code></pre> <p>Attempt 2: Three <code>background-image</code>s<br> <a href="http://jsfiddle.net/nPUQN/" rel="nofollow noreferrer">http://jsfiddle.net/nPUQN/</a></p> <pre class="lang-css prettyprint-override"><code>.back { background: none; background-image: url("images/back-middle.png"), url("images/back-end.png"), url("images/back-front.png"); background-position: 14px 0, 100% 0, 0 0; background-repeat: repeat-x, no-repeat, no-repeat; border-right: 8px transparent; border-left: 14px transparent; color: $white; height: 28px; padding: 5px; </code></pre> <p>}</p> <p>If it looks like atypical CSS that's because we're using SASS.</p> <p>Is there something obvious I'm missing or doing wrong? Any advice on how to make this work would be greatly appreciated.</p> <p><strong>EDIT</strong><br> Since I got so many answers that "work", I'll mark correct the answer that works best in Chrome, FF and IE9.</p> <p><strong>EDIT 2</strong><br> I've tried all answers and none work in IE9. We have to support IE9 (and IE8, but I won't even go there for now). I'm going to start a bounty. Anyone who can supply an answer that works for IE9, Firefox and Chrome gets it.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload