Wrap background-image à la taille de la fenêtre du navigateur

Question

fondamentalement, j'ai un petit problème avec un fond, je me sers. Je dois remettre à la côte en fonction de ce largeur de la fenêtre est, parce que je travaille avec un écran géant et il affiche bien, mais sur 1024x768, il ne fonctionne pas tout à fait exact. Je posterai quelques images ci-dessous pour vous montrer tout ce que je veux dire.

Sur ma résolution: http://imgur.com/Pl87L

Sur un écran de 1024x768: http://imgur.com/l6CUe

De plus, voici le CSS pour mon fond:

html, body { 
width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: url(/../images/background10.jpg) fixed no-repeat; 
    } 

J'espère que cela aide :).

Ross.

Answer 1

Il peut y avoir une meilleure façon, mais je l'ai utilisé jquery avant de changer (onLoad) le src de fond basé sur la largeur du navigateur, quelque chose le long des lignes de ...

function browserSize() { 
    var bsr_w = $(window).width(); 
    if (bsr_w <= 800) { 
     $('body').css("background-image", "url(background_small.jpg)"); 
    } else if (bsr_w <= 1024) { 
     $('body').css("background-image", "url(background_medium.jpg)"); 
    } else { 
     $('body').css("background-image", "url(background_large.jpg)"); 
    } 
} 

Answer 2

En vous pouvez utiliser la propriété de taille d'arrière-plan. csspie peut également aider à cela (pensez que cela fonctionne comme je me souviens de l'essayer il ya quelques mois)

Answer 3

Il ya un plugin jQuery très utile qui gère cela assez gracieusement pour vous: http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

Cela peut être un peu comme utiliser un marteau pour casser une noisette, mais il pourrait faire ce dont vous avez besoin.