I want the background image for a page to stretch to the full width and height. The challenge here is that it should leave out an area of 48 px at the top as well as at the bottom (those are header and footer areas and we don't want this image to hide behind that). Also, I am trying to do it with css only (no javascript or client side code). CSS3 is ok. 

Here is where I am so far. I have been able to get the top margin:

```
 background-image: url('images/image1.png')
background-repeat: no-repeat;
background-attachment:fixed;
background-position:  center 48px;  
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 

```