By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,160 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

Stretching a portion of an image

P: n/a
I'm trying something in CSS, and I was wondering if anyone knows of a
way to do it.

The goal is to have one image with a width of 25px, and have the left
12 pixels be one side of an image of indeterminate width, the right 12
pixels be the right side of the image, and the center pixel to stretch
the entire distance in between. I know how to do this using three
separate images, but is it possible to do it by just somehow
stretching the 1 pixel in the center?

Thanks! =)

Mar 21 '07 #1
Share this Question
Share on Google+
2 Replies


P: n/a
elephant wrote:
The goal is to have one image with a width of 25px, and have the left
12 pixels be one side of an image of indeterminate width, the right 12
pixels be the right side of the image, and the center pixel to stretch
the entire distance in between.
something like this-
style-
img {position:absolute}
img.a {left:0;top:0;clip:rect(0 12px auto 0)}
img.b {left:12px;top:0;width:40%;height:26px}
img.c {right:12px;top:0;clip:rect(0 auto auto 13px)}

html-
<img src="xx" class=a>
<img src="xx" class=b>
<img src="xx" class=c>

Mar 21 '07 #2

P: n/a
On Mar 21, 4:05 pm, "scripts.contact" <scripts.cont...@gmail.com>
wrote:
elephant wrote:
The goal is to have one image with a width of 25px, and have the left
12 pixels be one side of an image of indeterminate width, the right 12
pixels be the right side of the image, and the center pixel to stretch
the entire distance in between.

something like this-
style-
img {position:absolute}
img.a {left:0;top:0;clip:rect(0 12px auto 0)}
img.b {left:12px;top:0;width:40%;height:26px}
img.c {right:12px;top:0;clip:rect(0 auto auto 13px)}

html-
<img src="xx" class=a>
<img src="xx" class=b>
<img src="xx" class=c>
Awesome =) Thank you very much

Mar 21 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.