Background Image Question (CSS)

Question

I have the following CSS style in my head section:
body { margin: 0px; padding: 0px; text-align: center;
background: #fff
url(/images/Home/TopGradBlack.jpg) 0 0 repeat-x; }
...where TopGradBlack.jpg is a black-white gradient measuring
500 pixels
high by 5 pixels wide. The image displays as it should, with
the page
appearing black at the top, grading into white below.
But I want the background to consist of a black-white
gradient on the
left half of the page only, with a blue-white gradient on the
right
half. So I inserted a div (ID = Body2) inside the body and
added another
style, as follows:
body { margin: 0px; padding: 0px; text-align: center;
background: #fff
url(/images/Home/TopGradBlack.jpg) 0 0 repeat-x; }
#Body2 { margin: 0px; padding: 0px; text-align: center;
background: #fff
url(/images/Home/TopGradBlue.jpg) 50% 0 repeat-x; }
But it doesn't work. Rather than displaying from the middle
of the page
rightward, TopGradBlue.jpg dispays clear across the page. If
I change it
to 0 50% repeat-x, then it works as it should, displaying
across the
middle of the page. But when I change it back to 50% 0
repeat-x, it
displays clear across the top of the page.
What am I doing wrong?
Thanks.

Answer 1

I would NEVER use GIF compression with gradients.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"darrel" <[email protected]> wrote in message
news:fu7s37$ja0$[email protected]..
>> So, in other words, it can't be done?
>
> If your gradient is vertical (from top to bottom) just
make the image very
> wide...like 1000 pixels, and save it as a GIF (Gifs
compress really well
> with horizontal bands of the same color). Then do just
as you're doing,
> but omit the 'repeat'.
>
> Otherwise, I assume you're trying to create two columns?
Perhaps the
> solution is to make the gradient a background of the
column wrapper DIV
> isntead of making it a standalone DIV just for the
image.
>
>> similar things before. Also, the percent locator
works on vertical
>> alignment, so I assumed it would horizontally, too.
>
> It 'worked' on vertical because you weren't repeating it
vertically.
>
> -Darrel
>