Hello all,
I need somehelp with background tiling. I have a sneaking suspicion that
what I want to do is not possible, but I'll ask anyway. :>) First some
background: Here's the site in question: www.sayatnova.com (I'm sure many of
you have seen this before as I've often asked for help).
I've come a long way since I first created the site many moons ago and I'm
trying to convert it to a (1) Table-less, (2) Frame-less and (3) Validated
Strict design. Item #1 is done, #3 is mostly done (Loose standard because of
the frames), but #2 is *almost* done. I've dropped from three frames to two
by finding a better menu system and moving the menu out of a frame.
I have a frame on the left and I'm trying to remove it while retaining the
site's look. Some of the pages (About Us, FAQ, Mission Statement and others)
have a tiled image as the background. Since the page is loaded in a separate
frame, it can be tiled indefinitely when the window is resized.
I've played around with the page in no frames. I can get the <div>
positioning I want, but the background is more difficult. I need to tile the
background throughout the whole page while keeping the left side (and
preferably the top) black. At first, I tried this:
background: #000000 url('images/background.jpg') repeat 250px 50px;
I thought this would *start* tiling the background from left=250px and
top=50px, leaving the rest black. Instead, it *centered* the image at those
points and the image still wrapped around and tiled the background around
the whole page. Then, I tried this:
background: #000000 url('images/background.jpg') repeat-y 250px 50px;
This time I got the left side black, but that was only as good as the image
width. When I resized the screen to 1280 x 1024, the image was centered down
the middle and there was black on both sides.
What I need to do is have the image start tiling indefinitly starting at
left=250px and top=50px, but *not* wrap around and cover the whoe page. I've
done some research but I suspect that it can't be done using css.
My only other option, which I'd like to avoid if possible, is to create a
background image that's 1280x1024 in size and use "background: #000000
url('images/background.jpg') repeat-y 250px" to vertically tile it. At
smaller resolutions the background will clip, and it will still cover the
page when the screen is resized upwards. The drawback, of course, is that
the file size for an image that large is too big for a background and would
slow down the page. And, what if someone were to view the site at 1600x1200?
I'd be stuck with the same problem.
I've tried putting the background in the Container and Content div's, but
again, that's imperfect. The div's grow and shrink with their content,
leaving awkward and uneven looking black spaces where I don't want them.
So....how can I acheive my goal using css? I'm hoping that someone out
there will whip out a little known command and save my day! :>) I have a
feeling that I'll need to use the large background image.
Thanks in advance...
--
Viken K.