How do I repeat part of an image using background-position and CSS sprites?

Posted by thor on Stack Overflow See other posts from Stack Overflow or by thor
Published on 2010-03-23T01:37:34Z Indexed on 2010/03/23 1:41 UTC
Read the original article Hit count: 314

Filed under:

css

|

background-position

|

sprites

|

background-image

I would like to create some buttons with dynamic width using CSS sprites and background-position but I'm not sure if what I want is possible..

I would like the button to have a left-side, middle, and right-side, with the middle repeating as required. Ideally I would like this to be made up of one image of 11px wide so the left and right sides are both 5px wide and the middle is 1px repeated. Is there some way I can define in CSS to use the one centre pixel of the image and repeat if for the required (unknown) width?

Normally I've used two images to achieve similar results - one for the sides and a second image of 1px width for the middle, but if there's some way of combining them into one image I would prefer to use that.

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about background-position

Validatation error "Value Error : background-position Too many values or values are not" How to so

as seen on Stack Overflow - Search for 'Stack Overflow'
Why validation giving this error. How to solve? ul#navigation li#navigation-3 a.current Value Error : background-position Too many values or values are not recognized : -164px -164px -36px -164px -164px -36px This is error screen. CSS ul#navigation { height: 36px; left: 300px;… >>> More
IE6 background-position(?) issue

as seen on Stack Overflow - Search for 'Stack Overflow'
I apply to stackoverflow as my last resort. I got this ie6 bug while using the image at the background of the link. It seems that ie6 scrolls the background. How can I avoid it? At some width it shows like this: And at some other it shows like that: IE7 & FF show this just like I expect: The… >>> More
Change background position with jQuery

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi! I'd like to change the background position of a CSS-class while hovering a li-element. HTML: <div id="carousel"> <ul id="submenu"> <li>Apple</li> <li>Orange</li> </ul> </div> CSS: #carousel { float: left; width: 960px; height:… >>> More
Scrolling background stops after awhile?

as seen on Game Development - Search for 'Game Development'
Can anyone tell me where my maths is wrong please, it stops scrolling after awhile. if (background.position.y < background2.position.y) { background.position = ccp(background.contentSize.width / 2, background.position.y - 50 * delta); background2.position = ccp(background.contentSize.width… >>> More
jQuery background-position animation

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi guys, I've created an image which is basically a CSS sprite of 3 images together. It's size is 278x123 so they are basically 3 images of 278x41. What I am trying to do is to make an animation of that by changing the background position. I've tried many things, one of my not very working solution… >>> More