1. Home
  2. Forums Index
  3. Browser Side / CSS 12:37 am May 21, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Button with left and right images

         

greencode

7:51 pm on Nov 13, 2013 (gmt 0)

10+ Year Member Top Contributors Of The Month



I don't think there's a way of doing this but thought I'd ask anyway.

I have a site that has a tiled pattern and therefore I have to have to use transparent images for buttons and suchlike.

What I would like to do is have a button and then using :before and :after to add images on the left and right of the text and then have a repeating x image on the button text background.

I would normally do this the following way: 


<div class="left"></div>
<div class="mid">Button</div>
<div class="right"></div>


and then add the background image to the left and right divs and have a repeated background image on the mid div.

The thing is i'm trying to style a plugin in Wordpress and it's way too much hassle to go through all instances of buttons and code them again so I would like to be able to do this: 


<div class="my-button">Button</div>


and then using css have something like this: 


.my-button {
background: transparent url('images/bt-cn.png') no-repeat;
background-size: auto 40px;
line-height: 48px;
}

.my-button:before {
display: block;
content: "";
width: 13px;
height: 48px;
background: transparent url('images/bt-lf.png') no-repeat;
float: left;
margin-right: 10px;
}

.my-button:after {
display: block;
content: "";
width: 13px;
height: 48px;
background: transparent url('images/bt-rt.png') no-repeat;
float: right;
}


But the problem with that is the repeated image on the my-button div spans over the left and right images. This would be achievable if the buttons had a solid background but they're transparent.

Any ideas or help would be greatly appreciated.

swa66

2:05 am on Nov 14, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Why not give the button a fixed width margin so that the background is not under the floated fixed width pseudo elements?

lucy24

5:25 am on Nov 14, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



:: quick detour to CSS3 ::

###, I was thinking of borders.

Now, if your button were sitting on top of an element that had left and right border images...

greencode

6:13 am on Nov 14, 2013 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks for your replies, not sure I follow though?

lucy24

7:11 am on Nov 14, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I think what swa is describing is a button contained within another element, so the main background belongs to the container while the left and right backgrounds belong to the button. But :before and :after pseudo-elements go inside the real element's margins and padding-- they're really shorthand for "content begins with" and "content ends with"-- so wouldn't you be right back where you started?

I'm a little confused by this:
have a repeated background image on the mid div.
<snip>
.my-button {
background: transparent url('images/bt-cn.png') no-repeat;


Isn't this the one you do want to repeat?

Read the CSS3 section on border images. It's pretty thrilling ;)

greencode

7:27 am on Nov 14, 2013 (gmt 0)

10+ Year Member Top Contributors Of The Month



Sorry, yes that is supposed to repeat. As mentioned in the first post, I can't add any more html to the button.

greencode

7:30 am on Nov 14, 2013 (gmt 0)

10+ Year Member Top Contributors Of The Month



Border image looks interesting but it's not spurred in IE at all is it?

lucy24

8:59 am on Nov 14, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



but it's not supported in IE at all is it?

According to caniuse dot com, no :( MSIE 10 is supposed to be pretty similar to a browser, but for border-images we have to wait for 11.

:: rewind ::

11 is now "current"? I've barely started seeing 10! FF and Safari yes-- back to the dawn of time if you include -webkit- and -moz- variants-- and similarly Opera (-o- Presto, as-is Webkit).

swa66

10:23 am on Nov 14, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



But :before and :after pseudo-elements go inside the real element's margins and padding-- they're really shorthand for "content begins with" and "content ends with"-- so wouldn't you be right back where you started?

Nope.
Positioning ... allows you to put things where you want at will.

e.g.: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta charset="utf-8" />
    <title>polyglot HTML5 test</title>
    <style>
      html, body {
        height: 100%;
        background: rgb(255,255,128);
      }
      #target {
        width: 50%;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color:rgba(0,255,0,0.5);
        margin: 0 100px;
        position: relative;
      }
      #target:before, #target:after {
        width: 100px;
        height: 100px;
        position: absolute;
        top:0;
      }
      #target:before {
        content:"red";
        background-color:rgba(255,0,0,0.5);
        left:-100px;
      }
      #target:after {
        content:"blue";
        background-color:rgba(0,0,255,0.5);
        right:-100px;
      }
    </style>
  </head>
  <body>
    <div id="target">GREEN</div>
  </body>
</html>


The div and the before and after of it have translucent backgrounds so the yellow on the body shines through.

The div has margins to make space for the before and after outside of the div and then the negative offset on the positioning allows the pseudo elements to move outside of the div ...

Note the div is given positioning (this is essential).

Only tested in chrome, obsolete versions of IE will not support this (or most of the rest of what's nifty for that matter).

DrDoc

7:50 pm on Nov 19, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Multiple backgrounds [css3.info] are fairly well supported, as long as IE9 is a good starting point for you.

greencode

8:06 pm on Nov 19, 2013 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks for this @DrDoc but the only trouble I have is that the buttons have transparent left and right sides and so multiple backgrounds would work as I need the centre section to tile horizontally.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 12:37 am May 21, 2026