Full background + problème css

bonjour à tous,
J'ai un petit soucis avec mes images de fond en full background, celles-ci s'adaptent à la page que lorsqu'on redimensionne la fenètre du navigateur.

Lors du téléchargement de la page ou de son rafraichissement, elles ne se placent pas bien.

voir exemple:
http://www.treesign.eu/index.php?/theatre/

J'ai vérifer le pluging .php et .js tout semble normal, le problème vient donc du code css (je pense).
Voici le code que j'utilise:

#the-background   {   
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
opacity: 0.5;
overflow: hidden;
z-index:-3;
   }

Lorsque que je change #the-background par #the-background img, l'image s'adapte à la fenètre mais elle est déformée (étirée)

#the-background   img{   
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
opacity: 0.5;
overflow: hidden;
z-index:-3;
   }

Quelqu'un aurait-il une idée ? une solution ?
Merci pour vos réponses futures !!

Bonjour, tu devrais regarder ça pour faire ce que tu a besoin.

alsacreation/arriere_plan_extensible

dans cette article est très bien expliqué plusieurs façon de procéder pour faire ce "miracle"

J'ai moi même adapté la solution JQuery de Simon-K à Mootools.

/* background resizable */    
function redimensionnement(){ 
    // -- l'element à redimensionner
    var img = $('item');

    // -- on récupére et on place dans des variable la largeur et la hauteur de l'id donné
    var image_width = img.getSize().x; 
    var image_height = img.getSize().y;     

    // -- on calcul le ratio entre la largeur et la hauteur de l'image que l'on place dans deux variables
    var over = image_width / image_height; 
    var under = image_height / image_width; 

    // -- on récupére également la largeur et la hauteur de l'écran
    var body_width = $(window).getSize().x;
    var body_height = $(window).getSize().y;


    if (body_width / body_height >= over) { 
        // -- Si la largeur de l'écran divié par la hauteur de ce dernier est supérieur ou égal au ratio largeur/hauteur de l'id 
        // -- on applique :
        // --       la largeur de l'écran à l'id
        // --       un calcul pour la hauteur [cligne]
        // --       une positon left à zéro
        // --       un calcul très savant pour le top Xp

        img.morph({ 
                    'width': body_width + 'px', 
                    'height': Math.ceil(under * body_width) + 'px', 
                    'left': '0px', 
                    'top': Math.abs((under * body_width) - body_height) / -2 + 'px' 
                }); 
    }  

    else { 
        // -- Sinon,
        // -- on applique :
        // --       un calcul pour la largeur [cligne]
        // --       la hauteur de l'écran à l'id
        // --       une positon top à zéro
        // --       un calcul très savant pour le left Xp

        img.morph({ 
            'width': Math.ceil(over * body_height) + 'px', 
            'height': body_height + 'px', 
            'top': '0px', 
            'left': Math.abs((over * body_height) - body_width) / -2 + 'px' 
        }); 
    } 
}