I would like to find a way to used a fixed background image that automatically resizes to the screen (browser window).

I have tried a bunch of different css and html in different areas.

I must be missing something. I see it on other sites.

I want to put an image of something on each side of the content area (currently set at 85% screen width) that is fixed and positioned correctly regardless of browser window size.

Thanks everyone.

Hi,
apparently u can't do a background resizable for the moment (will have to wait for css3)
I manage to do it with this code
CSS

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
#arriere {
	/* l'image occupe toute la place du body */
	width : 100%;
	height: 100%;
}

HTML

<img id="arriere" alt="" src="image.jpg" />

after that you will be able to add text or whatever u want with a div in position:absolute;

hope will help !

yes it is possible. Lets say you put your image in wp-contents/uploads and it is called bg.jpg, you will add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Top

<img src="./wp-content/uploads/bg.jpg" class="bg" />

and then add this to ATO->Add HTML/CSS Inserts->CSS Inserts

img.bg {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;
	
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
	
	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}
div#container {
	/* This is the only important rule */
	/* We need our content to show up on top of the background */
	position: relative; 
}

neat little trick some guy came up with.

No guarantees it will work in all cases - this will cause the image to show behing the contents aslo, if you want the image to be hidden behind the container, add 'background: #ffffff;' to the container css.

How would I take a smaller background image and repeat it all over the page?
Thank you

Nevermind...it was more simple than I thought. Just uploaded the image and went to body, links, text. Thanks

Juggledad,

Thanks I tried that but interesting problem occurred that I could not work around. The header which I have in "HTML Inserts: Header" and the footer which I have in "HTML Inserts: Body Bottom" end up behind the background image. The site is societypagemag.com.

Thank you very much.

Chuck

Whatis the URL?
What did you put in those areas?
Try adding a z-index

Adding a lower z-index to "img.bg" and a higher one for "div.container" fixed it for me.

cheers,
superheadline.net

Greetings,

This code worked like a charm for me... well at least for the home page. Trouble I'm having is, any other page I click to just has a white background. Did I miss something?

Thanks,
Tom

what is the url?
What did you add - exactly?

Ok, I'm still trying to nail this issue down. I have noticed that the url's that are not showing the background are in the categories.

For example:

http://domain.com/site/learn - The background shows.

http://domain.com/site/category/learn - No Background

Also no background on individual posts.

Does this help at all?

Tom

Ok, it is fixed. I decided to us the whole URL of the image as opposed to relative. That did the trick.
Thanks!

Tom