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

Question

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

Demandé el 19 de Juillet, 2009: Quand la question a-t-elle été
658393 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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?

Demandé el 19 de Juillet, 2009 par Fábio Antunes

Answer 1

5 Réponses

Answer 2

1097voto

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.

Répondu el 10 de Septembre, 2011 par Vashishtha Jogi (2363 Points )

Answer 3

476voto

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%;

Répondu el 28 de Février, 2011 par Matt Burgess (3119 Points )

Answer 4

189voto

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.

Répondu el 30 de Juillet, 2009 par Fábio Antunes (4232 Points )

Answer 5

170voto

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*/
}

Répondu el 23 de Mars, 2012 par Andaero (3319 Points )

Answer 6

41voto

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.

Répondu el 6 de Août, 2012 par Thorsten Niehues (1167 Points )

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

Réponses

HTML

CSS

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

HTML

CSS

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: