image de fond du corps CSS fixé à plein écran, même lorsque le zoom avant/arrière

Question

Je suis en train de réaliser quelque chose comme ça avec CSS:

Je voudrais garder l'image de fond de corps fixe sur plein écran, c'est une sorte de fait par le code suivant:

body 
{ 
    background: url(../img/beach.jpg) no-repeat fixed 100% 100%; 
} 

maintenant, je peux vérifier la fenêtre est en effet rempli avec cette image, au moins cela fonctionne sur mon Firefox 3.6

Cependant, il plissa quand j'essayé de zoomer/out (ctrl + -/+), l'image est simplement étirée/réduite au fur et à mesure que la page effectue un zoom.

Existe-t-il une meilleure façon de le faire purement avec CSS? Je n'ai pas trouvé de bonne propriété pour l'image de fond. Ou devrais-je commencer à penser à jQuery pour manipuler la largeur et la hauteur à la volée? Ils ont tous deux été mis à 100%, donc je pense que cela devrait fonctionner « comme toujours » :(

Merci pour toute suggestion à l'avance!

Answer 1

Je l'ai utilisé these techniques avant et ils ont tous deux fonctionnent bien. Si vous lisez la avantages/inconvénients de chaque vous pouvez décider ce qui est bon pour votre site.

Sinon, vous pouvez utiliser le full size background image jQuery plugin si vous voulez vous éloigner des bogues dans ce qui précède.

Answer 2

Voici le code simple pour la page complète image de fond lors du zoom vous appliquez simplement le width:100% dans le style/css thats it

position:absolute; width:100%;

Answer 3

il y a une autre technique

utilisation

background-size:cover 

C'est-il ensemble complet de css est

body { 
    background: url('images/body-bg.jpg') no-repeat center center fixed; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Les derniers navigateurs supporte la propriété par défaut.

Answer 4

Vous pouvez faire beaucoup avec tout simplement ... la css propriété peut être background-size css réglé sur un certain nombre de choses aussi bien que tout cover comme Ranjith a souligné.

Le paramètre background-size: cover met à l'échelle l'image pour couvrir l'intégralité de l'écran mais peut signifier qu'une partie de l'image est hors écran si les proportions de l'écran et de l'image sont différentes. Une bonne alternative est background-size: contain qui redimensionne l'image d'arrière-plan pour s'adapter à la plus petite largeur et hauteur, en s'assurant que toute l'image est visible, mais peut conduire à letterboxing si les rapports d'aspect sont différents.

Par exemple:

body { 
     background: url(/images/bkgd.png) no-repeat rgb(30,30,30) fixed center center; 
     background-size: contain; 
    } 

Les autres options que je trouve moins utile sont: background-size: length <widthpx> <heightpx> qui définit la taille absolue de l'image d'arrière-plan.L'image d'arrière-plan est un pourcentage de la taille de la fenêtre. (voir w3schools.com's page)

Answer 5

Ajouter dans votre fichier css:

.custom_class 
{ 
    background-image: url(../img/beach.jpg); 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

puis, dans votre .html (ou .php) fichier appeler cette classe comme ça:

<div class="custom_class"> 
    ... 
</div> 

Answer 6

Utilisation Directement comme ceci

.bg-div{ 
    background: url(../img/beach.jpg) no-repeat fixed 100% 100%; 
} 

ou appeler séparément CSS comme

.bg-div{ 
    background-image: url(../img/beach.jpg); 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}