Is this achievable, with current technology?

Question

I have an idea for a layout, but was wondering if it was
technically
achievable.
Easy part :
- Centered fixed-width design (let's say 770px wide, 100%
high).
- Left side (335px) is empty. Right side (335px) is a text
column.
- Normal browser vertical scrolling to accomodate long pages.
So far so good -- but here's where it gets touchy...
- The background image is actually much larger than 335px. It
extents
off-screen to the left, so that if you pull the browser
wider, more of it
becomes uncovered (naturally, because it's a centered design,
an equal
amount of "blank" becomes uncovered to the right of the
text).
- The background image must not generate any scrollbars.
- The image should never slide under the text -- but it can
slide away from
it if need be. This means that no more than 335px of it can
slide into the
centered layout... more than that, and it touches the text
column.
Can this be done? The closest I've come to succeeding is
left-justifying a
huge background image with no-repeat, but this doesn't stop
it from sliding
under the text.
Should I be centering an enormous background with half of it
being
transparent information? That's the only other way I can
think of... but to
even do that would mean using PNGs, and the file size would
be ridiculously
huge, since it would have to be twice the width of the tree
image itself.

Answer 1

"Joe Makowiec" <[email protected]> wrote in
message
news:[email protected]..
>
> Just make the image 2 * X wide, and put the portion you
want revealed
> to the left of center. Then set it to position "top
center"
> (vertical/horizontal), thus:
>
> body {
> background-image : url(myimage.png) ;
> background-repeat : repeat-y ;
> background-position : top center ;
> }
I thought of that, but the resulting image would be GIGANTIC.
I was
wondering if there was a way to do it with only the left half
(the one with
actual image data).
The actual background of the site is a vertical gradient (not
a solid
color). A single GIF with 200 hues making up a gradient, 1px
wide, repeating
on X only, and only 7k in weight. So if I tried it the
obvious way (the one
you suggested) it would have to be a gigantic GIF (so the
colors match --
when one background ends, the other picks up) or a JPG
(compression would
almost ensure the gradient be banding at that size) or,
finally, a PNG (I
could use alpha channels here to make most of the image
invisible, thus
taking care of the gradient vs gradient problem... but can
you imagine a
1600x1200 PNG file? It must easily be over a meg large).
Ideally, I'd place the PNG a bit to the left, with only the
part with actual
data on file (800px instead of 1600). But I'm not sure
there's a way to do
"center image, but make it 400px off-axis to the left" so as
to "feign" the
presence of 800 invisible pixels on the right of the image.
Sorry if I'm not being as clear as I'd like, I'm just not
used to explaining
this type of stuff. It's all very clear in my head, honest.
Mike