Étirer et redimensionner une image CSS en arrière-plan – avec CSS uniquement

Je veux que mon image d’arrière-plan s’étire et évolue en fonction de la taille de la fenêtre du navigateur.

J’ai vu des questions sur Stack Overflow qui font le travail, comme Stretch et scale background CSS par exemple. Cela fonctionne bien, mais je veux placer l’image en backgroundbackground , pas avec une balise img .

Dans celui-là, une balise img est placée, puis avec CSS, nous rendons hommage à la balise img .

 width:100%; height:100%; 

Cela fonctionne, mais cette question est un peu ancienne et indique que dans CSS 3, redimensionner une image d’arrière-plan fonctionnera plutôt bien. J’ai essayé cet exemple le premier , mais ça n’a pas marché pour moi.

Existe-t-il une bonne méthode pour le faire avec la déclaration d’ background-image ?

CSS3 a un joli petit atsortingbut appelé background-size:cover .

Cela redimensionne l’image de sorte que la zone d’arrière-plan soit complètement recouverte par l’image d’arrière-plan tout en conservant les proportions. La zone entière sera couverte mais une partie de l’image peut ne pas être visible si la largeur / hauteur de l’image redimensionnée est trop grande

Vous pouvez utiliser la propriété CSS3 pour le faire très bien. Il redimensionne à ratio donc pas de distorsion de l’image (bien que cela fasse des petites images haut de gamme). Notez simplement que ce n’est pas encore implémenté dans tous les navigateurs.

 background-size: 100%; 

En utilisant le code que j’ai mentionné …

HTML

 

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

Cela produit l’effet désiré: seul le contenu défilera, pas l’arrière-plan.

L’image d’arrière-plan est redimensionnée dans la fenêtre du navigateur pour toute taille d’écran. Lorsque le contenu ne correspond pas à la fenêtre du navigateur et que l’utilisateur doit faire défiler la page, l’image d’arrière-plan rest fixe dans la fenêtre lorsque le contenu défile.

Avec CSS 3, cela semble beaucoup plus facile.

CSS:

 html,body { background: url(images/https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only/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*/ } 
 background-size: 100% 100%; 

étend bg pour remplir l’élément entier sur les deux axes

La partie CSS suivante devrait étendre l’image à tous les navigateurs.

Je le fais dynamicment pour chaque page. J’utilise donc PHP pour générer sa propre balise HTML pour chaque page. Toutes les images sont dans le dossier “image” et se terminent par “Bg.jpg”.

  

Si vous n’avez qu’une seule image d’arrière-plan pour toutes les pages, vous pouvez supprimer la variable $pic , supprimer les barres obliques inversées, ajuster les chemins et placer 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.

Utilisez ce CSS:

 background: url('img.png') no-repeat; background-size: 100%; 

Vous pouvez réellement obtenir le même effet qu’une image d’arrière-plan avec la balise img. Vous devez simplement définir son z-index plus bas que tout, définir position: absolute et utiliser un arrière-plan transparent pour chaque case du premier plan.

Vous pouvez append cette classe dans votre fichier CSS.

 .stretch { background: url(images/https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Cela fonctionne dans:

  • Safari 3 ou plus tard
  • Chrome Quoi ou plus tard
  • Internet Explorer 9 ou version ultérieure
  • Opera 10 ou version ultérieure (Opera 9.5 prend en charge la background-size , mais pas les mots-clés)
  • Firefox 3.6 ou version ultérieure (Firefox 4 prend en charge la version sans préfixe de fournisseur)

Expliqué par css-sortingcks https://css-sortingcks.com/perfect-full-page-background-image/

démo: https://css-sortingcks.com/examples/FullPageBackgroundImage/progressive.php

code:

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

Pour adapter correctement vos images en fonction de la taille du conteneur, procédez comme suit:

 { background-size:contain; background-repeat: no-repeat; } 

Je l’utilise et cela fonctionne avec tous les navigateurs:

   Stretched Background Image      
Smile

Stretch that Background Image!

This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.

Go on, try it - resize your browser!

Je suis d’accord avec l’image en div absolu avec 100% de largeur et de hauteur. Assurez-vous de définir 100% de largeur et de hauteur pour le corps dans le CSS et définissez les marges et le remplissage à zéro. Un autre problème que vous trouverez avec cette méthode est que lors de la sélection du texte, la zone de sélection peut parfois englober l’image d’arrière-plan, ce qui a malheureusement pour effet de rendre la page complète avec l’état sélectionné. Vous pouvez contourner ce problème en utilisant la règle CSS user-select:none , comme ceci:

      
content here

Encore une fois, Internet Explorer est le méchant ici, car il ne reconnaît pas l’option de sélection des utilisateurs – même la prévisualisation d’ Internet Explorer 10 ne le prend pas en charge, vous avez donc la possibilité d’utiliser JavaScript pour empêcher la sélection d’image d’arrière-plan ( http : //www.felgall.com/jstip35.htm ) ou en utilisant la méthode CSS 3 background-stretch.

En outre, pour le référencement, je mettrais l’image d’arrière-plan au bas de la page, mais si l’image d’arrière-plan est trop longue à charger (c’est-à-dire avec un arrière-plan blanc initialement), vous pouvez vous déplacer en haut de la page.

Merci!

Mais alors, cela ne fonctionnait pas pour les navigateurs Google Chrome et Safari (les étirements fonctionnaient, mais la qualité des images n’était que de 2 mm!) , Jusqu’à ce que quelqu’un me dise ce qui manque:

Essayez de régler la height:auto;min-height:100%;

Alors changez cela pour votre height:100%; ligne, donne:

 #### #background { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; } .stretch { width:100%; height:auto; min-height:100%; } 

Juste avant ce code nouvellement ajouté, je l’ai dans mes thèmes Drupal Tendu style.css :

html, body {height: 100%;}

#page {background: #ffffff; height: auto! important; hauteur: 100%; hauteur minimale: 100%; position: relative;}

Ensuite, je dois créer un nouveau bloc dans Drupal avec l’image tout en ajoutant class=stretch :

Il suffit de copier une image avec l’éditeur dans ce bloc Drupal qui ne fonctionne pas; il faut changer l’éditeur pour un texte non formaté.

Je voulais centrer et mettre à l’échelle une image d’arrière-plan, sans l’étirer sur toute la page, et je voulais que le format d’image soit conservé. Cela a fonctionné pour moi, grâce aux variations suggérées dans d’autres réponses:

IMAGE EN LIGNE: ————————

 

CSS ———————————-

 html { height:100%; } #background { text-align: center; width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; } .stretch { margin: auto; height:100%; } 

Utilisez le plugin Backstretch . On pourrait même faire glisser plusieurs images. Cela fonctionne aussi dans les conteneurs. Ainsi, par exemple, seule une partie de l’arrière-plan pourrait être recouverte d’une image d’arrière-plan.

Comme je pouvais même le faire fonctionner, il s’agit d’un plugin facile à utiliser :).

Vous pouvez utiliser la propriété border-image : yourimage pour redimensionner l’image jusqu’à la bordure. Même si vous donnez l’image d’arrière-plan, l’image de la bordure sera dessinée dessus.

La propriété border-image est très utile si votre feuille de style est implémentée quelque part qui ne supporte pas CSS3. Si vous utilisez chrome de Firefox, alors je recommande la background-size:cover propriété de background-size:cover elle-même.

Voulez-vous réaliser cela en utilisant une seule image? Parce que vous pouvez réellement faire un peu comme un arrière-plan d’étirement en utilisant deux images. Images PNG par exemple.

Je l’ai déjà fait et ce n’est pas si difficile. De plus, je pense que les étirements ne feraient que nuire à la qualité du fond. Et si vous ajoutez une image énorme, cela ralentirait les ordinateurs et les navigateurs lents.