Full page background on site

I'm using the following to get a full page background image on my site:

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;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

HTML:

	<img src="images/bg.jpg" class="bg">

HTML:

Used from this site: http://css-tricks.com/3458-perfect-full-page-background-image/


However because it is using an image instead of a background image, it pushes all my content out of the way. I have used position = relative in some of my divs and it seems to be working. I'm just wondering that if I have used that in my wrap div, will everything else inside be ok?

thanks.

 

IMO you should set the background to the body if you want it to be full screen. You can do it through the CSS.

body {
   background: url(path/to/image) no-repeat;
}

HTML:

This is very common on the web.

 

Like that though it doesn't stay fixed while the page content rolls over the top of it like in the example.

 

http://css-tricks.com/3458-perfect-full-page-background-image/

 

That's the same link as I posted as having problems with.

 

what CMS are you using?

 

Using Wordpress

 

PM with your IM Details, i have a few tricks i have been trying myself for just this kind of thing... not all of them work perfectly but i have found that using one or the other has got me through... i tried that link myself but it never quite looks right...

 

I worked out what to do. I used z-index on the background image css and it is fine now.