background image

[David Graham]

I use CSS to tile an image (in the body tag) background across all of the
page. But, and this is the bit I can't quite figure out, I would also like
to run an orange strip 200px wide (also in the body tag) in the pages
background down the left side of the screen. I have tried to achieve this
by:

style="background: url('art/orange.gif') 0% 0% repeat-y"

The trouble is it repeats down the page as expected but it also covers the
rest of the page with white, so I lose my other image (which is in an
external stylesheet) which is supposed to cover all parts of the pages
bacground which is not covered by the orange strip. So why doesn't the
orange stripe confine itself to the left edge of the screen? I guess its
not possible to have two images in the background of an element - unless of
course you know different.

thanks
David

 

[brucie]

I guess its not possible to have two images in the background of an element

true, stick one of the backgrounds on an element. some browsers
support this:

html{background: ...}
body{background: ...}

 

[David Graham]

AFAIK, you can only have ONE background image.
What you might want to try is making one image out of two. Merging the two
together.
Use the merged as your background and make the height something like 1200 so
that it won't matter if you scroll the background or not.
I've taken some tile patterns that were originally meant to be mixed
together as smaller images, but then I resize the thing to something huge
with the properties. That way I only get one tile instead of dozens.
Besides, I don't like the way the lines are visible between tiles.

Hi
I should be in bed but Brucie has had me reading a php function. Anyway, I
was more worried about the width. If I merge my 200px wide orange strip with
the other image which is a nice cream textured image, I would need to make
the cream bit really wide to ensure that the combined image went right
across the screen, otherwise using repeat-y will prevent my background from
filling in the right most portion of the screen and I simply couldn't use
repeat, or the orange bit of the merged image would form another orange
strip vertically somewhere in the region of the right part of the screen. I
am worried that if my merged image is very wide, a horizontal scrollbar
would form for clients using a low resolution screen, or is this wrong, do
backgrounds never force scrolling?
Must go to bed now, but look forward to reading any replies tomorrow.
thanks
David

 

[Dan Brussee]

Backgrounds will never cause the page to scroll. If it's too large, it
will just not show completely.