How do you atuo-size a wordpress background image?

[Jonathan Howard]

I am needing to find out how to make the background image on my site auto-sized based off of the resolution of a users screen. I want it to fit proportionately with the images/text in the same spot on the background. I am pretty close because I can have exactly what I want at a certain screen resolution, but it does not auto-fit at other resolutions. The images and text get pushed behind the content of the page instead of being off to the side. It also does not work on firefox or Ie. Please help me to find a fix for this. here is the code that I have right now.

[code]

/* Architecture */
html { }

body {

background: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #bcbcbc;
background: #fff url(http://i1207.photobucket.com/albums/bb474/jonathanhowardguitar/banddynamics.jpg?t=1287710849);
background-size: 100%; background
background-repeat: no-repeat;
background-attachment: fixed;
<style type="text/css">

[code]

[Death Slaught]

Don't give the background image to the body. Place a div inside of the body,

<div id="container"></div>

Place all of your content inside of this as if it were the body element.

Move the background image to the div and set the width/height to desire percentage.

#container {
    background-image: url('http://i1207.photobucket.com/albums/bb474/jonathanhowardguitar/banddynamics.jpg?t=1287710849'); 
    width:100%;
    height: 100%;
}

Thanks, Death

[Death Slaught]

I apologize, I just realized that my example only works without a doctype, and is a little sketchy. I'll try and look at this again first thing tomorrow.


Regards, Death

[Death Slaught]

To accomplish this you will need to use absolute positioning and z-index. Example


Regards, Death

[JKing]

Here is a site you can use as an example. http://www.quebecregion.com/en/where_to_stay?a=vis

If you view the source you can see how they are using an img tag inside a div with a lower z-index than the wrapper. This allows them to set the img height to auto and the width to 100% resizing the "background".

[Death Slaught]

I was just editing my post to add an explanation, but JKing took care of that for me. :) I often forget to add explanations or overlook something because I'm posting while in class.


@JKing
If the user has the window itself resized the page only compensates to a point.


Thanks, Death

[JKing]

They also have a min-width:815px; on the img tag so that stops it from going really small but if you were to remove that it would go smaller.

[Death Slaught]

<-------- had Firefox displaying the wrong set of styles on elements when inspecting them. That explains sooo much. I probably wouldn't have noticed had you not mentioned the min-width, so thank you.