Positioning a fixed background image in CSS with top and right margins

Question

I want to have a fixed position background image that scales and I need it to have a 220px top margin and a 170px right margin so that the image is not under the navigation bars. I have come close with the following code but the right margin varies due to the percent.

#container_hu
{
width: 100%;
text-align: left;
background: #fff;
border: 0px solid #000000;
height:100%;
padding-top:260px;
min-width:1100px;
background:url(../images/bg_image.jpg) no-repeat;
background-attachment:fixed;
background-position: 78%  220px;
background-size:25%;
}

Thanks for any help!

Answer 1

You can use CSS3's background-clip property to force clip the background to within the allowed content area. i.e. you can specify a padding to your DIV (to cover the nav bars etc..) and specify the background-clip property to content-box to achieve this. Example CSS below:

#container_hu {

    /* this forces the bg to be rendered only within allowed content area (CSS3) */
    background-clip: content-box;
    background-image: url("your_image.jpg");
    background-repeat: no-repeat;

    /* this forces the bg to stretch with the container (CSS3) */
    background-size: 100% 100%;

    height: 300px;
    width: 400px;

    /* specify the top/left pixels to cover your nav-bar etc. */
    padding-left: 50px;
    padding-top: 50px;
}