Selective background tiling - this may be tricky.

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.

Viken Karaguesian wrote:

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.

It's doable if you're willing to add two more divs to your pages.

<body>
<div id="outer">
<div id="inner">
whatever you have on your page already
</div
</div>
</body>

body{
background: #000000 url('images/background.jpg');
}
#outer{
background: #000000 url('images/background-y.jpg') repeat-y top left;
}
#inner{
background: #000000 url('images/background-x.jpg') repeat-x top left;
}

background-y.jpg should be black and 250px wide, while
background-x.jpg should be black and 50px high.

Not tested.
Known issues: without setting a height to the #inner and #outer and
body and html, the black vertical bar will stop at the bottom of your
content.
Setting all four elements to 100% height will make the vertical black
bar stop before the end of the viewport if the page is higher than the
viewport in some browsers. There are ways to prevent that from
happening, but I can't remember how off the top of my head atm. I'm
sure someone else knows though, and I think you can make it work.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

It's doable if you're willing to add two more divs to your pages.

I have no problem with that :>)

Not tested.
Known issues: without setting a height to the #inner and #outer and
body and html, the black vertical bar will stop at the bottom of your
content.

Yes. That's what I've been fighting. If I set to 100%, it only spans as far
as the content. If I set fixed height and width, then the div's won't
resize according to the screen size.

Setting all four elements to 100% height will make the vertical black
bar stop before the end of the viewport if the page is higher than the
viewport in some browsers.

Sorry, I'm not sure what you mean by viewport :>( Are you referring to the
viewing area?

Sometimes, I wish that 100% meant 100% of the *page*, so If I set a <div> to
height: 100%, it will span 100% of the page's height, regardless of whether
the content does or not. That would make some things much easier.

Viken K.

"Viken Karaguesian" <vikenkNO_SPAM (AT) NO_SPAMcomcast (DOT) net> wrote

Sometimes, I wish that 100% meant 100% of the *page*, so If I set a <div
to
height: 100%, it will span 100% of the page's height, regardless of
whether
the content does or not. That would make some things much easier.

Try looking at background attatchment. This might allow the background
images to "pretend" to be the full size by not moving when you scroll

http://www.w3.org/TR/CSS21/colors.ht...und-attachment

--
Martin Eyles
martin.eyles (AT) NOSPAM (DOT) bytronic.com