Image de fond CSS à largeur, hauteur doit auto-échelle de proportion

Question

J'ai

body {
    background: url(images/background.svg);
}

L'effet désiré est que cette image de fond aura une largeur égale à celle de la page, à la hauteur de changer afin de conserver les proportions. par exemple, si l'image d'origine se trouve être 100*200 (toutes les unités) et le corps est 600px de large, l'image d'arrière-plan doit être 1200px de haut. La hauteur doit changer automatiquement si la fenêtre est redimensionnée. Est-ce possible?

Pour l'instant, Firefox dirait qu'il fait la hauteur de l'ajustement et le réglage de la largeur. Est-ce peut-être parce que la hauteur est la dimension la plus longue et qu'il essaie d'éviter le rognage? Je veux à découper verticalement, puis faites défiler l'écran: pas de répétition horizontale.

Aussi, le Chrome est de placer l'image dans le centre, pas de répétition, même lorsqu' background-repeat:repeat est donné explicitement, ce qui est la valeur par défaut de toute façon.

Answer 1

Il est une propriété CSS3 pour cela, à savoir background-size (vérification de la compatibilité). Alors que l'on peut définir les valeurs de longueur, il est généralement utilisé avec les valeurs spéciales contain et cover. Dans votre cas particulier, vous devez utiliser cover:

body {
    background-image:  url(images/background.svg);
    background-size:   cover;                      /* <------ */
    background-repeat: no-repeat;
    background-position: center center;            /* optionally, center the image */
}

Eggsplanation pour contain et cover

Désolé pour le mauvais jeu de mots, mais je vais utiliser l' image du jour par Biswarup Ganguly à des fins de démonstration. Permet de dire que c'est de votre écran, et la zone grise est à l'extérieur de votre écran visible. Pour la démonstration, je vais supposer une 16x9 ratio.

Nous voulons utiliser celui-ci l'image du jour en toile de fond. Cependant, nous rognage de l'image à 4x3 pour une raison quelconque. Nous avons pu définir l' background-size de la propriété de certains de longueur fixe, mais nous allons nous concentrer sur contain et cover. Notez que j'ai aussi supposer que nous n'avons pas marquer la largeur et/ou hauteur de body.

contain

contain

L'échelle de l'image, tout en préservant l'essentiel de l'aspect ratio (le cas échéant), la plus grande taille tels que les deux sa largeur et sa hauteur peut s'adapter à l'intérieur de l'arrière-plan de zone de positionnement.

Cela permet de s'assurer que l'image de fond est toujours entièrement contenue dans le fond de positionnement de la zone, cependant, il pourrait y avoir un espace vide rempli avec votre background-color dans ce cas:

cover

cover

L'échelle de l'image, tout en préservant l'essentiel de l'aspect ratio (le cas échéant), à la plus petite taille tels que les deux sa largeur et sa hauteur peut couvrir complètement le fond de zone de positionnement.

Cela permet de s'assurer que l'image de fond est tout couvrant. Il n'y aura pas visible background-color, toutefois en fonction de l'écran du ratio d'une grande partie de votre image pourrait être coupés:

Answer 2

Basé sur les conseils de https://developer.mozilla.org/en-US/docs/CSS/background-size que je me retrouve avec la recette suivante qui a fonctionné pour moi

Answer 3

Je ne suis pas sûr de ce que vous cherchez exactement, mais vous devriez vraiment consulter ces excellents posts de blog écrit par Chris Coyier de CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Lire les descriptions de chacun des articles et voir si ils ont ce que vous cherchez.

La première répond à la question suivante:

Est-il un moyen de faire une image d'arrière-plan redimensionnables? Comme dans, remplir le fond d'une page web, d'un bord à l'aide d'une image, peu importe la taille de la fenêtre du navigateur. Aussi, il faut la redimensionner plus grande ou plus petite que la fenêtre du navigateur changements. Aussi, assurez-vous qu'il conserve son ratio (ne pas étirer bizarre). Aussi, ne cause pas de barres de défilement, coupe juste à côté de la verticale si il en a besoin. Aussi, arrive sur la page en ligne de la balise.

Le deuxième post a pour but de voir la suite, une "image de fond sur un site web qui couvre l'ensemble de la fenêtre de son navigateur à tout moment. "

Espérons que cette aide.

Answer 4

J’ai eu le même problème, impossible de redimensionner l’image lorsque vous ajustez les dimensions du navigateur.

Mauvais Code :

Code du bon :

La clé ici est l’ajout de cet élément -> fond-taille : contiennent ;