835 votes

Étirer et mettre à l'échelle une image CSS dans le fond - avec CSS

Je veux que mon image de fond d'étirement et de l'échelle en fonction de la taille de la fenêtre du navigateur.

J'ai vu quelques questions sur un Débordement de Pile que de faire le travail, comme l'Étirement et à l'échelle de fond de CSS par exemple. Il fonctionne bien, mais je veux mettre l'image à l'aide d' background, pas avec un img balise.

Dans un un img balise est placée, et puis avec CSS, nous hommage à l' img balise.

width:100%; height:100%;

Il fonctionne, mais que la question est un peu vieux, et les états qui en CSS 3 redimensionnement d'une image d'arrière-plan va fonctionner assez bien. J'ai essayé cet exemple le premier, mais ça n'a pas fonctionné pour moi.

Est-il une bonne méthode pour le faire avec l' background-image déclaration?

1029voto

Vashishtha Jogi Points 2363

CSS3 a une jolie petite attribut appelé background-size:cover. Ce n'est pas étirer l'image, mais il peut recadrer l'image en conséquence.

469voto

Matt Burgess Points 3119

Vous pouvez utiliser la propriété CSS3 pour faire assez bien. Il redimensionne ratio donc pas de distorsion de l'image (bien qu'il ne haut de gamme de petites images). Il suffit de noter, ce n'est pas implémenté dans tous les navigateurs encore.

background-size: 100%;

186voto

Fábio Antunes Points 4232

En utilisant le code je l'ai mentionné...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

Qui produit l'effet désiré: seul le contenu de défilement, pas le fond.

L'arrière-plan de l'image redimensionne la fenêtre d'affichage du navigateur pour la taille de l'écran. Lorsque le contenu n'est pas adapté au navigateur de la fenêtre d'affichage, et l'utilisateur doit faire défiler la page, l'image d'arrière-plan reste fixe dans la fenêtre d'affichage pendant que le contenu défile.

Avec CSS 3, il semble que ce serait beaucoup plus facile.

165voto

Andaero Points 3319

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

40voto

Thorsten Niehues Points 1167

Le code CSS suivant la partie devrait s'étirer l'image avec tous les navigateurs.

- Je le faire dynamiquement pour chaque page. Donc j'utilise le PHP pour générer sa propre balise HTML pour chaque page. Toutes les photos sont dans "l'image" du dossier et à la fin avec "Bg.jpg'.

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      webkit-background-size: cover;
      moz-background-size: cover;
      o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Si vous avez une seule image de fond pour toutes les pages, vous pouvez supprimer l' $pic variable, supprimer échappement antislash, ajuster les chemins et placez ce code dans votre fichier CSS.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    webkit-background-size: cover;
    moz-background-size: cover;
    o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Cela a été testé avec Internet Explorer 9, Chrome 21, et Firefox 14.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: