How to create a full page background image that is fluid?

OPTION #1 Use a small seamless image tile for your body CSS and repeat it to fill the viewport window.  This works in all browsers.

http://alt-web.com/Backgrounds.shtml

OPTION #2 Use CSS gradients (no images required). This works in all browsers.

http://www.colorzilla.com/gradient-editor/

OPTION #3 Use multiple background-images or colors & apply them to different divisions. This works in all browsers.

http://alt-web.com/TEST/LHS-test.html

OPTION #4 Use a big background-image with CSS background-size:cover.  This won't work in pre-IE9 browsers.

http://alt-web.com/TEST/Resizable-BG.shtml

Nancy O.

You should set this forum to email you on a reply.

I don't have a link in your question to determine how you are trying to do this, but here's a technique I have used:

Take a look at this website and see if it doesn't have what you are trying to do. You'll see the flag in the background and I have used opacity in the layers on top of it to keep the flag somewhat visible.

Now, what the flag does not do is re-size itself with the viewport (the browser window). But the flag is in a div that sits on top of the body. My code is accessible, but you're looking for the flag div and it's defined in CSS thusly:

#flag {

          width: 100%;

          background-image: url("../images/polish-flag.png");

          background-repeat: no-repeat;

          min-height: 900px;

}

Now, CSS3 adds a new attribute you can apply to the background image thusly:

     background-size: 100% 100%;

That would make your background fill the viewport.

I chose to not do that, because I was worried about versions of Internet Exploder before 10.

You can do it without using a <div> if you use...

background-image:url(yourimage.jpg);

background-repeat:no-repeat;

background-size:cover;

In your css. The only problem with that is only CSS3 compliant browsers will see it as a full window image (oddly enough, IE 9 does see it).

For one with more backwards compatibility, you'll need to use a javascript similar to the one available here...

http://louisremi.github.io/jquery.backgroundSize.js/demo/