setting an image to fill the background of a div

Question

I'm trying to set an image as a background for the main body DIV.

The image needs to scale to fit the div and be vertically and horizontally centred . Overflow can be hidden on all sides.

Within the div, there needs to be a 25px padding on all sides, then the inner div has a background colour with a 0.2 opacity.

Within that div is the component area where the articles are published, again, with a 25px padding on all sides.

You can see the problem I am having here: http://betelec.ergonomiq.net/societe/offres-d-emploi#31-01-2013-responsable-de-projet

On this page, the article is an accordion and when it expands, the background image doesn't scale to fill the space and there is whitespace.

Also, on this page: http://betelec.ergonomiq.net/societe/charte

The default article length is longer than the image height, so the background again doesn't scale to fill the div and there is whitespace created.

I can change the image and place a much larger image that can scale down to fill the available space as needed. However, the image cannot tile.

Finally, the inner divs extend beyond the container div and so the content is getting cut off on the right.

In my style.less I have the following code:

body {
    &.menu-offres-d-emploi,
    &.menu-liens,
    &.menu-envoyer-votre-cv,
    &.menu-collaborateurs,
    &.menu-nous-contacter,
    &.menu-charte,
    &.menu-qui-sommes-nous,
    &.menu-services {
        #rt-main [class*="grid"] {
            & > div.rt-block {
                background-image: url(../images/backgrounds/blur.jpg);
                background-size: cover;
                position: relative;
                background-position: center;
                background-repeat: no-repeat;
                height: 100%;
                width: 100%;
                overflow: hidden;
                margin: 0;
                padding: 25px !important;
                // padding-bottom: 0;
                // margin-bottom: 0;
                & > div#rt-mainbody {
                    background: rgba(0, 168, 143, 0.2) !important;
                    overflow: hidden;
                    color: @white;
                    article.item-page {
                        padding: 25px;
                    }
                }
            }
        }
    }
}

As regards the padding, the issues are clearly visible in the two screenshots below.

As you can see, there is 25px padding from the edge of the background (where it meets the green aside) to the inner div which has a background colour of background: rgba(0, 168, 143, 0.2) !important; and a further 25px padding on the article.item-page. These are indicated by the small yellow lines I have overlaid on the screenshots. However, the same padding isn't working on the right side of the div, and the content is hitting up against the div.

The layout is supposed to look like this mockup.

Answer 1

Well, solved the issue:

I changed the less to:

body {
    &.menu-offres-d-emploi,
    &.menu-liens,
    &.menu-envoyer-votre-cv,
    &.menu-collaborateurs,
    &.menu-nous-contacter,
    &.menu-charte,
    &.menu-qui-sommes-nous,
    &.menu-services {
        div#rt-main {  // removed " [class*="grid"] "
            & > div.rt-container [class*="rt-grid"] {  //added this new selector level with the portion of code removed from previous line
                & > div.rt-block {
                    background-image: url(../images/backgrounds/blur.jpg);
                    background-size: cover;
                    position: relative;
                    background-position: center;
                    background-repeat: no-repeat;
                    height: 100%;
                    width: auto;
                    overflow: hidden;
                    margin: 0;
                    padding: 25px !important;
                    // padding-bottom: 0;
                    // margin-bottom: 0;
                    & > div#rt-mainbody {
                        background: rgba(0, 168, 143, 0.2) !important;
                        overflow: hidden;
                        color: @white;
                        article.item-page {
                            padding: 25px;
                        }
                    }
                }
            }
        }
    }
}