Ajustement de site web d'arrière-plan de l'image à la taille de l'écran

vous pouvez le faire avec ce plugin http://dev.andreaseberhard.de/jquery/superbgimage/

ou

   background-image:url(../IMAGES/background.jpg);

   background-repeat:no-repeat;

   background-size:cover;

avec aucun besoin de les préfixes navigateurs. c'est tout prêt suporterd dans les deux browers

OriginalL'auteur Victorino

Vous pouvez essayer avec

.appBackground {
    position: relative;
    background-image: url(".../img/background.jpg");
    background-repeat:no-repeat;
    background-size:100% 100vh;
}

fonctionne pour moi 🙂

OriginalL'auteur Carlos Jaraiz

.. J'ai trouvé les solutions ci-dessus ne fonctionne pas pour moi (sur les versions actuelles de firefox et de safari au moins).

Dans mon cas, je suis en train d'essayer de le faire avec une balise img, pas d'image de fond d'écran, mais il convient également de travailler pour l'image de fond d'écran si vous utilisez z-hauteur:

<img  src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >

Cette échelle de l'image plein écran (probablement casser l'aspect ratio), qui était ce que je voulais faire, mais a eu un dur à trouver.

Il peut aussi travailler pour l'image de fond d'écran mais j'ai renoncé à essayer ce genre de solution après couverture/contenir n'a pas fonctionné pour moi.

J'ai trouvé contiennent comportement ne semble pas correspondre à la documentation que j'ai pu trouver n'importe où - j'ai compris la documentation à-dire contiennent la plus grande dimension obtenir contenues à l'intérieur de l'écran (maintenu). J'ai trouvé contiennent toujours fait mon image minuscule (image d'origine a été grand).

Contenir étais avec des hacks plus proche de ce que je voulais que la couverture, ce qui semble être que l'aspect est maintenue, mais l'image est mise à l'échelle pour en faire la plus petite dimension de match de l'écran - c'est à dire toujours l'image pour la rendre aussi grand que possible jusqu'à ce que l'une des dimensions irait à l'écran...

J'ai essayé un tas de choses différentes, en commençant compris, mais a trouvé la hauteur a été essentiellement toujours ignoré et serait de débordement. (J'ai essayé de mettre à l'échelle une non-image grand écran pour être en plein écran sur les deux, brisée aspect est ok pour moi). Fondamentalement, le ci-dessus est ce qui a fonctionné pour moi, espérons que cela aide quelqu'un.

OriginalL'auteur pacifist

Essayer cela,

.appBg {

background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}

Celui-ci fonctionne pour moi

OriginalL'auteur Udara

Bien qu'il existe des réponses à vos questions, mais parce que j'ai été une fois victime de ce problème et après un peu de recherche en ligne, j'ai été incapable de résoudre le problème, mais mes collègues hub compagnon m'a aidé et je sens que je tiens à partager.
Exemples expliqués ci-dessous.
Dossiers: web-projets/projet1/dim-voyage.png

background-image:url(../dim/voyage.png); background-repeat:no-repeat; background-size:cover;

Mes principaux points est le nombre de points si vous avez remarqué mon voyage.png est situé à l'intérieur d'un dhceu dossier d'un autre dossier si vous êtes à ajouter le point selon le nombre de dossiers où votre image est stockée. Dans mon cas, mon voyage.png image est enregistrée dans deux dossiers c'est pourquoi deux points est utilisé, donc je pense que cela peut être le problème des images d'arrière-plan ne montre pas parfois, dans nos codes. Merci.

OriginalL'auteur Stanleynd

background: url("../image/b21.jpg") no-repeat center center fixed;

background-size: 100% 100%;

height: 100%;

position: absolute; 

width: 100%;

OriginalL'auteur Ravi dangar