Flipped background image?

F

Frogleg

I have a background image (color gradient) that shades from left to
right. I want to flip it and use it at the opposite side of the page
going right to left. So this would be accomplished...how? I.e.,

<td style="background-image; url (images/rightleft.gif); ????">
 
R

rf

Frogleg said:
I have a background image (color gradient) that shades from left to
right. I want to flip it and use it at the opposite side of the page
going right to left. So this would be accomplished...how? I.e.,

<td style="background-image; url (images/rightleft.gif); ????">

<td style="background-image; url (images/rightleft.gif);">

looks good to me. Of course you will have reversed the image in your
favourite image editor :)
 
D

Dylan Parry

rf said:
<td style="background-image; url (images/rightleft.gif);">

looks good to me.

You need your eyes testing, Richard :p There is a definite semicolon in
there when there should be a colon...

<td style="background-image: url (images/rightleft.gif);">
^
 
R

rf

Dylan Parry said:
You need your eyes testing, Richard :p There is a definite semicolon in
there when there should be a colon...

Hmmm. How true. Thanks for that:)

I do think though that Frogleg was expecting CSS to swap the image end for
end for him, which of course is not going to happen.
 
F

Frogleg

Hmmm. How true. Thanks for that:)

I do think though that Frogleg was expecting CSS to swap the image end for
end for him, which of course is not going to happen.

Sorry. The semicolon was a typo.

No, I *don't* want CSS to flip the image. I thought it was too
elementary to mention I'd already done that. I want the flipped image
to right-align. That is, the original is 1100px wide, with actual
color shading in the leftmost 75px or so -- the remainder is white. So
I want to now have the RIGHTmost portion shaded. As it is, the image
is aligned with the white at the left edge of the table cell, and the
shaded portion (theoretically) somewhere about 10" to the right of my
monitor.

Lemme see if I can illustrate this graphically. The original was:
...... . . . . . .

I now want something that looks like:
. . . . . . . . ...

in a variable-width cell.
 
E

Els

Frogleg said:
Sorry. The semicolon was a typo.

No, I *don't* want CSS to flip the image. I thought it was
too elementary to mention I'd already done that. I want the
flipped image to right-align. That is, the original is
1100px wide, with actual color shading in the leftmost 75px
or so -- the remainder is white. So I want to now have the
RIGHTmost portion shaded. As it is, the image is aligned
with the white at the left edge of the table cell, and the
shaded portion (theoretically) somewhere about 10" to the
right of my monitor.

Lemme see if I can illustrate this graphically. The
original was: ..... . . . . . .

I now want something that looks like:
. . . . . . . . ...

in a variable-width cell.

Not sure if I understand you, but maybe you want
background-position:top right;
?
 
R

rf

Frogleg wrote
Sorry. The semicolon was a typo.

No, I *don't* want CSS to flip the image. I thought it was too
elementary to mention I'd already done that.

er, no, it was not. I did, however think: hmmm, why is Frogleg asking such
questions :)
I want the flipped image
to right-align. That is, the original is 1100px wide, with actual
color shading in the leftmost 75px or so -- the remainder is white. So
I want to now have the RIGHTmost portion shaded. As it is, the image
is aligned with the white at the left edge of the table cell, and the
shaded portion (theoretically) somewhere about 10" to the right of my
monitor.

Yep. I know now what you are talking about.

You require the property background-position: right.

However, this will only work if the background-image in narower than the
canvas. If said image is wider than the canvas then you obtain what you see,
the background-image is, er, flush left.

You probably originally, made the image 1100 pixels wide because you did not
specify background-repeat: repeat-y. So, your background repeated x as well.
(BTW your background will still repeat if the canvas is wider thatn 1100
pixels wide, which may be common nowdays).

So, reduce your image to just 75 pixels wide, get rid of the white space,
just have the 75 pixels of gradient.

Then:

body
{
backround-image: ...;
background-repeat: repeat-y;
background-position: right;
}
 
D

Dylan Parry

Spartanicus said:
He's using a gradient, so it should be set to no-repeat.

If the OP has a gradient that is 1px high, then "repeat-y" would be a
useful property to include. That way the image will be smaller and will
still fill the whole cell with the gradient background.
 
S

Spartanicus

rf said:
Yep. I know now what you are talking about.

You require the property background-position: right.

If only one percentage or length value is given, it sets the horizontal
position only, and the vertical position will be 50%. Probably not what
the OP wants.
However, this will only work if the background-image in narower than the
canvas. If said image is wider than the canvas then you obtain what you see,
the background-image is, er, flush left.

The image will be right aligned, irrespective of it's or the containing
block's width.
You probably originally, made the image 1100 pixels wide because you did not
specify background-repeat: repeat-y.

He's using a gradient, so it should be set to no-repeat.
 
F

Frogleg

Frogleg wrote:


Not sure if I understand you, but maybe you want
background-position:top right;

Yep. That was it. I just dropped in to say I figured this out.
Unfortunately, it didn't improve the appearance of the page at all,
but then, I learned something. :)

(BTW, for a background image, one doesn't need to specify "top." By
default it'll start top left and replicate or tile as necessary to
fill the area.) (I think.)
 
E

Els

Frogleg said:
Yep. That was it. I just dropped in to say I figured this
out. Unfortunately, it didn't improve the appearance of the
page at all, but then, I learned something. :)

(BTW, for a background image, one doesn't need to specify
"top." By default it'll start top left and replicate or
tile as necessary to fill the area.) (I think.)

Unless you are specifying 'right' or 'left', then the default
for the vertical is 'center'. Or so I just read in
Spartanicus' post.
 
T

Toby Inkster

rf said:
Hmmm. How true. Thanks for that:)

What is this love affair you have with the inappropriate semi-colon,
Richard? That's twice in as many days, is it not?
 
F

Frogleg

Unless you are specifying 'right' or 'left', then the default
for the vertical is 'center'. Or so I just read in
Spartanicus' post.

For images, yes. But background images are handled differently, aren't
they? My color gradient is 10px X 1100px and starts at the top and
replicates as necessary to fill the space available. Same as a 10px X
10px pattern would tile all over the place.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top