Background Images

Background image liquid

[barteringlines]

I have a designer who would like for me to use a picture (not a good repeating pattern for a full size background). page would be liquid design. Is this a good idea and what is the best way to achieve this?

A lot of the assets on the page (footer, buttons etc.) need to also have some opacity to view the background image below it as well.

So - questions:
Should this be fixed? If not, what is best route to take for acheiving this?
Are there known rendering problems with the opacity that I have described.

Thank you very much for any insight, I really appreciate it.

Jon

[Trace]

if you want to make it fluid, you can do it like this;

<style type="text/css">
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#bg img{width:100%; height:100%;}
#container {position:absolute; width:100%; height:100%;}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:auto;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
html {overflow-x: hidden; overflow-y: auto;}
</style>
<![endif]-->

<div id="bg"><img src="/images/backgroundNew.gif" alt=""></div>
<div id="container">
Content here
</div>

[webfoo]

It largely depends upon the image that is to be the background. I tend to avoid all busy backgrounds, repeating backgrounds, or dark backgrounds. From an aesthetic viewpoint, try a light swirly background.

[edited by: tedster at 2:10 am (utc) on Mar. 26, 2008]

[D_Blackwell]

The load time for this image could be a hassle. How big is it? You probably don't want your users seeing an entire page background popping into place. It's one thing for needed images to render and 'pop in', but not for a page background. Better (IMO) to select a light tiling background that complements your design, and add images where needed.

The word 'picture' conjures up the thought of file size? Combined with the preference for 'liquid', I would be cautious.

[barteringlines]

Thank you so much for the advice, these were my thoughts exactly. We have come together on a fixed size page using this background but not as the page background. My worries were that of size and page loading and you have confirmed that.

Thank you everyone, I hope I can contribute something helpful as well soon.

[Xapti]

Had you wanted a stretchy background like Trace answered, or one which is really big and centered on the browser window, and you'll see whatever will fit..?

[barteringlines]

It is a very large picture of a piece of fabric that cannot repeat made even more complicated by the fact that the navigation buttons and footer graphic must be transparent to show the background. Currently I have cut everything up into pieces to retain the transparency of the above items.

I still welcome suggestions because I am not convinced that my setup is the best.

I have taken the mockup with the back ground and created a fixed size 950 width site as well as fixed height. I have three center content divs each with a fixed size portion of the background. This means my content pieces in the center of the page do not allow for expansion. This limits the amount of content that can be placed in the center which may not be a problem now but will be going forward.

any more suggestions appreciated. thanks