Hi all,

I am working on a small design and I am having some trouble figuring out how to code it.

here is the pic:


The problem is, I have an image that I want to fill up the entire background, and its not a repeatable image.

The two things I need are:
hidden overflow (no scroll)
no margins (fills the whole page)

Now I could just make it a standard size but I want it to be compatible with all resolutions.

So my solution was to make it a bit oversized and then hide the overflow.
The thing is the woman I am coding it for wants the text links of the left to be a non standard font, hence and I can't figure out how to make them render properly without interfering with the background. I tried saving them as .gif with transparent mattes but the edges became super distorted.

Please, can someone help me figure out what my best option is?

Thanks,
-SS

hidden overflow (no scroll)

Set the CSS on the div to overflow:hidden

no margins (fills the whole page)

Clear margins and padding on the body and your main wrapper if you have one.
margin: 0;
padding: 0;

the woman I am coding it for wants the text links of the left to be a non standard font, hence and I can't figure out how to make them render properly without interfering with the background.

SIFR to the rescue! http://wiki.novemberborn.net/sifr
Relatively easy to use and it's accessible.

I want it to be compatible with all resolutions.

You need a liquid layout, but if you load a whoppingly huge image, it's going to be slow loading. You might want to consider putting the branches background just the background of a fixed center wrapper.