Stylesheets - How can I have only part of a image in the background?

Author

How can I have only part of a image in the background?

laredotornado@zipmail.com

2006-08-27, 6:37 pm

Hello,

I have a cell that is 100 pixels wide and an image that is 200 pixels
wide. I want to put the right-most 100 pixels of that image as my
background image. How can I do taht? If I specify

background-image:url('images/myimg.gif');

by default, the image starts displaying from left to right, so I only
get the left-most 100 pixels, which I don't want.

Thanks for your help, - Dave

Stephen Poley

2006-08-27, 6:37 pm

On 27 Aug 2006 08:05:59 -0700, laredotornado@zipmail.com wrote:

>I have a cell that is 100 pixels wide and an image that is 200 pixels
>wide. I want to put the right-most 100 pixels of that image as my
>background image. How can I do taht? If I specify
>
>background-image:url('images/myimg.gif');
>
>by default, the image starts displaying from left to right, so I only
>get the left-most 100 pixels, which I don't want.

How about editing the image with something like Irfanview and extracting
the rightmost 100 pixels?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Ed Mullen

2006-08-27, 6:37 pm

laredotornado@zipmail.com wrote:
> Hello,
>
> I have a cell that is 100 pixels wide and an image that is 200 pixels
> wide. I want to put the right-most 100 pixels of that image as my
> background image. How can I do taht? If I specify
>
> background-image:url('images/myimg.gif');
>
> by default, the image starts displaying from left to right, so I only
> get the left-most 100 pixels, which I don't want.
>
> Thanks for your help, - Dave
>

How about positioning? Ala:

<td style="background-image:url('images/myimg.gif');
background-position: -100px 0px; background-repeat: no-repeat;">blah
blah blah</td>

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
A cubicle is just a padded cell without a door.

Jeremy

2006-08-29, 6:45 pm

Ed Mullen wrote:
> laredotornado@zipmail.com wrote:
>
> How about positioning? Ala:
>
> <td style="background-image:url('images/myimg.gif');
> background-position: -100px 0px; background-repeat: no-repeat;">blah
> blah blah</td>
>

I think if you want the rightmost 100 pixels, it would be better to use

background-position: right top;

or to vertically center it,

background-position: right center;

That way, even if the image is not precisely 200 pixels wide, you'll
still get the rightmost 100 pixels.

Jeremy