CSS: background image Full Size

Essayer d'obtenir une image de fond en taille réelle avec:CSS: background image Full Size

html { 
    height: 100%; 
    background:url('../img/bg.jpg') no-repeat center center fixed; 
    background-size: cover; 
}

C'est montrant l'image d'arrière-plan avec une largeur correcte, mais la hauteur s'étirée. J'ai essayé différentes options comme

html { 
background:url('../img/bg.jpg') no-repeat center center fixed; 
background-size: 100% auto; 
-webkit-background-size: 100% auto; 
-moz-background-size: 100% auto; 
-o-background-size: 100% auto;

}

suppression height: 100%

mais aucun d'entre eux travaillaient.

Source

2012-12-27 Himanshu Yadav

Quand vous dites étirées, voulez-vous dire la forme de l'image est déformée, ou que le haut et le bas de l'image sont coupés de? Et quels navigateurs avez-vous essayé? –

Quelle est la résolution de l'image? – Vucko

Un exemple vivant serait génial. – Omega

Votre écran est évidemment une forme différente à votre image. Ce n'est pas rare, et vous devriez toujours répondre à ce cas, même si votre écran a la même forme (rapport d'aspect), parce que les écrans d'autres personnes ne seront pas toujours. Pour traiter cela, vous n'avez qu'une seule des trois options suivantes:

Vous pouvez choisir de recouvrir complètement l'écran avec votre image, mais sans déformer l'image. Dans ce cas, vous devrez faire face au fait que les bords de votre image seront coupés. Pour ce cas, utilisez: background-size: cover
Vous pouvez choisir de vous assurer que toute l'image est visible et non déformée. Dans ce cas, vous devrez vous en tenir compte car une partie de l'arrière-plan ne sera pas couverte par votre image. La meilleure façon de gérer cela est de donner un fond solide à la page et de concevoir votre image pour qu'elle se fondre dans le solide (bien que ce ne soit pas toujours possible). Pour ce cas, utilisez: background-size: contain
Vous pouvez choisir de couvrir l'intégralité de l'écran avec votre arrière-plan et de le déformer pour l'ajuster. Pour ce cas, utilisez: background-size: 100% 100%

Source

2012-12-27 19:06:32

vous pouvez partiellement éviter la distorsion du rapport d'aspect de l'image en limitant la dimension minimale de l'image (par exemple 'min-height: 700px;'). – ecoe

la plupart du temps j'utilise la première option 'background-size: cover' avec des requêtes média qui servent différents rapports d'aspect de cette image. –

essayer avec contenir au lieu de la couverture et du centre puis:

background-size: contain; 
background-position: center;

Source

2012-12-27 18:39:26 vGichar

Il me donne même résultat même si je supprime ces deux propriétés. Je n'ai pas travaillé pour moi. Je veux couvrir l'arrière-plan complet. –

êtes-vous sûr que l'image elle-même n'est pas étiré, à part le html? – vGichar

Vérifiez les propriétés de l'URL d'arrière-plan. –

Une meilleure solution pourrait être d'utiliser un plugin jQuery léger pour dimensionner dynamiquement l'arrière-plan sur le site du navigateur. Un que j'aime vraiment est backstretch.js. Ils sont incroyablement simples à mettre en œuvre.

Source

2012-12-27 19:14:42 rentageekmom

Vous devez utiliser le corps comme sélecteur et non comme html, cela entraînera des problèmes avec votre balisage. Votre code est ci-dessous:

html { 
    height: 100%; 
    background:url('../img/bg.jpg') no-repeat center center fixed; 
    background-size: cover; 
}

Je voudrais essayer quelque chose comme:

body { 
    background:url('../img/bg.jpg') no-repeat 50% 0 fixed; 
    margin: 0 auto; 
}

Vous ne devriez pas avoir à indiquer les dimensions de l'image.

Source

2012-12-27 19:19:04 squashriddle

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

Source

2014-03-04 08:51:21

J'ai même problème j'utiliser ce CSS sur body

background: url(image.jpg); 
    background-color: rgba(0, 0, 0, 0); 
    background-position-x: 0%; 
    background-position-y: 0%; 
    background-size: auto auto; 
background-color: #0a769d; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
width: 100%; 
background-size: 100% 100%; 
background-position: center; 
max-width: 100%; 
min-width: 100%; 
top: 0; 
left: 0; 
padding: 0; 
margin: 0;

Source

2017-06-21 01:53:22

CSS: background image Full Size

Répondre

Questions connexes