web-dev-qa-db-fra.com

Adapter l'image de fond du site Web à la taille de l'écran

Je commence tout juste sur un site Web et je rencontre déjà un petit problème pour lequel je ne trouve pas de solution spécifique.

Je voulais que l'arrière-plan de mon site Web s'adapte à n'importe quelle taille d'écran en largeur, peu importe la hauteur.

Voici le lien vers mon image:

    ../IMAGES/background.jpg

MODIFIER

Je n'ai aucune idée de ce qui ne va pas, mais pour une raison quelconque, le corps ne veut même pas obtenir l'image de fond. Il affiche simplement un fond blanc uni.

body
{background-image:url(../IMAGES/background.jpg);}
htmlcssbackgroundsizeresponsive
17
Tim

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;

sans avoir besoin des préfixes des navigateurs. tout est prêt dans les deux cas

55
Victorino

Essaye ça , 

 background: url(../IMAGES/background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Pour plus d'informations, suivez ceci Image d'arrière-plan Perfect Full Page !!

21
zey

Vous pouvez essayer avec

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

travaille pour moi :)

10
Carlos Jaraiz

.. J'ai trouvé que les solutions ci-dessus ne fonctionnaient pas pour moi (au moins sur les versions actuelles de Firefox et Safari).

Dans mon cas, j'essaie en fait de le faire avec une balise img, et non pas background-image, bien que cela devrait également fonctionner pour background-image si vous utilisez z-height:

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

Ceci redimensionne l'image en "plein écran" (cassant probablement les proportions), ce que je voulais faire mais que j'avais du mal à trouver.

Cela peut également fonctionner pour background-image, bien que j’ai renoncé à essayer ce type de solution après que couvrir/contenir ne me convient pas. 

J'ai trouvé que le comportement de contenu ne semblait pas correspondre à la documentation que je pouvais trouver nulle part - j'ai compris que la documentation à contenir devrait faire en sorte que la plus grande dimension soit contenue dans l'écran (aspect maintenu). J'ai trouvé contenir toujours rendu mon image minuscule (image originale était grande).

Contain était avec quelques hacks plus proches de ce que je voulais que la couverture, ce qui semble être que l'aspect est conservé mais que l'image est redimensionnée pour que la plus petite dimension corresponde à l'écran - c'est-à-dire que l'image soit toujours la plus grande possible jusqu'à ce que l'un des les dimensions iraient hors écran ...

J'ai essayé un tas de choses différentes, en commençant par le dessus, mais j'ai trouvé que la hauteur était toujours ignorée et débordait. (J'ai essayé de redimensionner une image non grand écran pour qu'elle soit plein écran sur les deux, l'aspect brisé me convient). Fondamentalement, ce qui précède est ce qui a fonctionné pour moi, espérons que cela aidera quelqu'un.

2
pacifist

Essayez ceci, j'espère que cela vous aidera:

position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
2
Sara Popa

Essaye ça:

background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
2
Rohit

Correction d'image d'arrière-plan pour les écrans avec compatibilité de navigateur css

.full-screen {
    height: 100%;
    width: 100%;
    background-image: url(../images/banner.jpg);
    background-size: cover;
    background-position: center;
    //for browser compatibility
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
}
0
Super Model

Bien qu'il y ait des réponses à vos questions, mais parce que j’étais une fois victime de ce problème et après quelques recherches en ligne, j’ai été incapable de le résoudre, mais mon compagnon de route m’a aidé et j’ai pensé que je devrais partager. Exemples expliqués ci-dessous. Dossiers: web-projets/projet1/imgs-journey.png

background-image: url (../ imgs/journey.png); répétition de fond: non répétée; taille du fond: couverture;

Mes points principaux sont les points là-bas si vous avez remarqué que mon voyage.png est situé dans un dossier imgs d’un autre dossier. Vous devez donc ajouter le point en fonction des dossiers de numéros dans lesquels votre image est stockée. Dans mon cas, mon image journey.png est enregistrée dans deux dossiers, c’est la raison pour laquelle deux points sont utilisés. Je pense donc que le problème peut être que les images d’arrière-plan ne sont pas affichées parfois dans nos codes. Merci.

0
Stanleynd

Essaye ça,

.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

0
Udara