Comment étirer le fond sur toute la largeur de la fenêtre ? Étirer l'arrière-plan sur toute la largeur à l'aide de CSS Étirer l'image sur tout le bloc CSS

Les technologies Web, comme diverses tendances de conception, ne restent pas immobiles, c'est pourquoi à chaque fois des fonctionnalités et des nuances originales pour les sites Web apparaissent. L'une de ces « directions » est l'utilisation d'un arrière-plan (backgorund), qui s'étend sur tout l'écran en largeur et en hauteur. Il y a environ un an ou plus, je l'ai dit : l'image a été placée dans l'en-tête du blog et « transitionnée » en douceur vers la couleur d'arrière-plan principale de la page Web. Si vous le souhaitez, vous pouvez même ajouter .

Placer une grande image évolutive comme arrière-plan est quelque chose de nouveau et de plus complexe, la solution que j'ai trouvée dans cet article.

Le but de cette leçon est de placer une image d'arrière-plan sur le site qui couvrirait en permanence tout l'arrière-plan de la fenêtre du navigateur. Que faut-il faire exactement :

• remplissez la page entière avec une image sans espaces ;
• redimensionner l'image si nécessaire (réduire la fenêtre du navigateur) ;
• maintenir les proportions de l'image ;
• positionner l'image au centre de la page ;
• manque de barres de défilement sur la page ;
• solution multi-navigateurs adaptée à différents navigateurs ;
• mise en œuvre sans aucune technologie tierce telle que Flash.

Il existe donc plusieurs solutions adaptées pour un arrière-plan de site Web en plein écran.

Pour accomplir cette tâche, nous pouvons utiliser la propriété background-size en CSS3. Nous utiliserons un élément html meilleur que body. Définissons l'arrière-plan pour qu'il soit fixe et centré, puis utilisons la valeur cover dans background-size.

html ( background: url(images/bg.jpg) centre sans répétition fixe ; -webkit-background-size : couverture ; -moz-background-size : couverture ; -o-background-size : couverture ; background-size : couverture; )

La solution est prise en charge par presque toutes les solutions populaires du réseau :

• Firefox 3.6+ (Firefox 4 prend en charge la version préfixée non-fournisseur)
• Opera 10+ (Opera 9.5 prend en charge la taille de l'arrière-plan mais sans la valeur de couverture)
• Chrome peu importe+
• Internet Explorer 9+
• Safari 3+

Un certain Goltzman a trouvé une solution qui permet au hack de fonctionner sous IE

filtre : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale"");

Mais attention !!! cela peut causer des problèmes avec les liens sur la page. À propos, un peu plus tard, Matt Litherland a ajouté que le code, en principe, peut être utilisé mais ne peut pas être utilisé à cette fin. éléments HTML ou body, mais vous devez tout implémenter via un div avec une hauteur et une largeur de 100%.

Une version alternative est présentée par Doug Neiner. Dans ce cas, un élément intégré dans la page est utilisé , qui peut être redimensionné dans n'importe quel navigateur. Nous définissons la valeur min-height, qui remplit la fenêtre du navigateur verticalement, et définissons la largeur à 100 %, qui remplit la page horizontalement. Nous définissons également la largeur minimale pour que l'image ne soit jamais plus petite qu'elle ne l'est réellement.

img.bg ( /* Définir des règles pour remplir l'arrière-plan */ min-height : 100 %; min-width : 1024px; /* Configurer une mise à l'échelle proportionnelle */ width : 100 %; height : auto; /* Configurer le positionnement */ position : fixe ; haut : 0 ; gauche : 0 ; ) @media screen et (max-width : 1024px) ( /* Spécifique à cette image particulière */ img.bg (gauche : 50 % ; marge-gauche : -512px ; /* 50% */ ) )

Fonctionne dans n'importe quelle version de navigateurs de haute qualité - Safari / Opera / Firefox et Chrome. Comme toujours, IE a ses propres nuances :

• IE 9 - fonctionne ;
• IE 7/8 - fonctionne le plus souvent correctement, mais ne centre pas les images plus petites que la fenêtre du navigateur ;
• IE 6 - peut être personnalisé, mais qui a besoin de ce navigateur de toute façon.

Une autre option pour résoudre le problème en utilisant Styles CSS Il s'agit de placer l'image intégrée sur la page avec une position fixe dans le coin supérieur gauche, puis de définir la largeur minimale et la hauteur minimale à 100 % tout en conservant les proportions.

#bg ( position:fixe; haut:-50%; gauche:-50%; largeur:200%; hauteur:200%; ) #bg img ( position:absolue; haut:0; gauche:0; droite:0; bas : 0 ; marge : auto ; largeur min : 50 % ; hauteur min : 50 % ; )

Le hack fonctionne dans :

• Safari / Chrome / Firefox (les premières versions non testées, mais fonctionnent bien dans les dernières)
• Internet Explorer 8+
• Opera (n'importe quelle version) et avec IE les deux sont bogués de la même manière avec une erreur de positionnement.

Cette option est beaucoup plus simple (d'un point de vue CSS) si l'on sait que le rapport hauteur/largeur de l'image (img utilisée comme arrière-plan) est plus grand ou plus petit que le rapport hauteur/largeur actuel de la fenêtre du navigateur. Si c'est moins, alors nous ne pouvons utiliser que width = 100% et la fenêtre sera également remplie en largeur et en hauteur. Si plus, vous ne pouvez spécifier que height = 100 % pour remplir toute la fenêtre.

Toutes les données sont accessibles via JavaScript, les codes utilisés sont les suivants :

#bg ( position : fixe ; haut : 0 ; gauche : 0 ; ) .bgwidth ( largeur : 100 % ; ) .bgheight ( hauteur : 100 % ; )

$(window).load(function() ( var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() ( si ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

À mon avis, le centrage n'est pas effectué dans ce cas (d'après ce que je comprends), mais cela peut être fait. La plupart des navigateurs de bureau sont pris en charge, y compris IE7+. Enfin, l'auteur de l'article sur les hacks a préparé un ensemble de fichiers d'exemple dans lesquels tout cela est implémenté - vous pouvez le télécharger. Les commentaires sur l'article original contiennent également des informations et des discussions, bien que l'auteur ait ajouté la plupart des détails importants sous forme d'instructions au message et que je les ai également traduits et indiqués. Bien entendu, des exemples vous aideront à comprendre tout cela. En général, sans les « gags » constants d'IE7, tous les hacks mentionnés seraient idéaux.

P.S. Vous voulez acheter un livre ? - vous n'êtes plus obligé d'aller en magasin car désormais une librairie en ligne vous permet de tout faire en ligne : choisir, payer et organiser la livraison à domicile.

Salutations. Dans cet article, je souhaite partager trois façons de placer une image comme arrière-plan d'une page entière en utilisant uniquement HTML + CSS (pas de JS).

Ainsi, nos exigences pour l’image d’arrière-plan sont les suivantes :

• Couvre 100 % de la largeur et de la hauteur de la page
• L'arrière-plan est redimensionné si nécessaire (l'arrière-plan est étiré ou compressé selon la taille de l'écran)
• Le rapport hauteur/largeur de l'image est préservé
• L'image est centrée sur la page
• L'arrière-plan ne provoque pas de défilement
• La solution est aussi compatible avec tous les navigateurs que possible
• Aucune autre technologie autre que CSS n'est utilisée

À mon avis, c'est La meilleure façon, parce que c'est le plus simple, le plus concis et le plus moderne. Il utilise la propriété CSS3 background-size, à laquelle nous appliquons balise html. C'est du HTML, et non du corps, car sa hauteur est supérieure ou égale à la hauteur de la fenêtre du navigateur.

Définissez l'arrière-plan pour qu'il soit fixe et centré, puis ajustez sa taille à l'aide de background-size: cover .

Html (image d'arrière-plan : url (images/background.jpg); répétition d'arrière-plan : pas de répétition ; position d'arrière-plan : centre; pièce jointe d'arrière-plan : fixe ; -webkit-background-size : couverture ; -moz-background- taille : couverture ; -o-background-size : couverture ; background-size : couverture ; )

Cette méthode fonctionne dans

Chrome (toute version) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Si la largeur de la fenêtre est inférieure à la largeur de l'image, une requête multimédia sera utilisée pour centrer l'arrière-plan.

img.background ( hauteur min : 100 % ; largeur min : 640 px ; largeur : 100 % ; hauteur : auto ; position : fixe ; haut : 0 ; gauche : 0 ; /* Dépend de la taille de l'image */ @media screen et (largeur maximale : 640px)( img.bg (gauche : 50 % ; marge gauche : -320px; ) ) )

Cette méthode fonctionne dans :

• N'importe quelle version de bons navigateurs (Chrome, Opera, Firefox, Safari)
• Internet Explorer 9+

Une autre façon est la suivante : corriger l'image dans le coin supérieur gauche de la page et étirez-la en utilisant les propriétés min-width et min-height de 100 %, tout en conservant les proportions.

Certes, avec cette approche, l'image n'est pas centrée. Mais ce problème est résolu en enveloppant l'image dans , ce qui fait 2 fois la taille de la fenêtre. Et nous étirons l'image elle-même et la plaçons au centre.

div.background ( position : fixe ; haut : -50 % ; gauche : -50 % ; largeur : 200 % ; hauteur : 200 % ; ) img ( position : absolue ; haut : 0 ; gauche : 0 ; droite : 0 ; bas : 0 ; marge : auto ; largeur minimale : 50 % ; hauteur minimale : 50 % ; )

Cette méthode fonctionne dans bons navigateurs et IE 8+.

J'espère que ces informations vous seront utiles. Personnellement, j'utilise souvent ces méthodes, notamment la première. Il existe probablement d'autres façons de placer une image sur l'arrière-plan en utilisant CSS. Si vous les connaissez, partagez-les dans les commentaires.

Bonjour. Aujourd'hui, nous verrons comment étendre l'arrière-plan à l'aide d'outils CSS (sans l'intervention d'autres outils, tels que javascript et autres).

Il est devenu possible d'étirer l'arrière-plan CSS à l'aide de moyens CSS3, notamment en utilisant la propriété background-size. Je dois dire que cette propriété fonctionne bien mieux que des solutions similaires en Javascript (qui étaient utilisées avant l'apparition de background-size), car elle répond plus rapidement et de manière plus adéquate aux changements de taille du navigateur, lisse plus rapidement une image étirée et, comme ils aimaient dire au début des années 2000, x, - "Fonctionnera même avec Javascript désactivé."

La propriété background-size peut avoir plusieurs valeurs.
1) cela peut être l'une des directives : couvrir ou contenir.

Taille de l'arrière-plan : contenir ; /* Met à l'échelle l'image tout en conservant les proportions afin que l'image entière tienne à l'intérieur du bloc. */ taille du fond : couverture ; /* Met à l'échelle l'image tout en conservant ses proportions afin que sa largeur ou sa hauteur soit égale à la largeur ou à la hauteur du bloc. */

2) il peut s'agir d'un pourcentage (100 % ou 94 % de la largeur du conteneur). Dans ce cas, vous pouvez utiliser soit 1 valeur en pourcentage, soit 2. S'il y a 2 valeurs, alors la hauteur et la largeur de l'image seront mises à l'échelle en même temps et chaque valeur est ajustée proportionnellement aux pourcentages spécifiés dans le paramètres).

Taille de l'arrière-plan : 100 % ; /*Équivalent à la directive cover*/ background-size: 100% 50%; /*La largeur sera de 100% de la largeur du bloc, mais la hauteur ne sera que de 50%, l'image sera très probablement déformée*/

3) valeur directement numérique (en piskels, centimètres, em, etc.). Il peut également y avoir 2 (ou 1) paramètres, comme dans le cas précédent.
4) valeur automatique. Indique que l'image ne sera pas étirée, mais que la taille d'origine sera utilisée. Dans ce cas, il peut également y avoir 2 ou 1 paramètres. Autrement dit, vous pouvez spécifier les éléments suivants :

Taille de l'arrière-plan : 60 % automatique ; /*la largeur de l'image sera de 60%, et la hauteur sera proportionnelle à la taille de l'image originale*/

À en juger par le site Web Can I Use, cela fonctionnera dans tous les cas. navigateurs modernes, y compris les versions d'IE non inférieures à 9. Il n'y a donc en principe aucune raison de s'inquiéter. Voir tableau de compatibilité :

Je me souviens avoir fouillé dans de nombreuses informations et essayé plusieurs méthodes jusqu'à ce que je trouve la solution exacte dont j'avais besoin à ce moment-là.

Ci-dessous, je vais montrer 3 méthodes qui étendent l'arrière-plan sur toute la largeur de l'écran.

La première méthode utilise du CSS3 pur. Tout fonctionne grâce à la propriété background-size. Dans mon cas, j'étirerai l'image sur toute la largeur de l'écran, c'est-à-dire que j'attribuerai des propriétés à la balise body. Vous pouvez l'appliquer à un bloc selon vos besoins, par exemple.

Nous allons étirer cette image avec une jolie fille pour remplir tout l'écran :)

En général, nous définissons un bloc auquel nous attribuons des styles et les ajoutons dans le fichier de styles ce bloc, le code suivant :

Corps (arrière-plan : url (images/bg.jpg) centre sans répétition en haut fixe ; -webkit-background-size : couverture ; -moz-background-size : couverture ; -o-background-size : couverture ; taille d'arrière-plan : couverture; )

Comme vous pouvez le voir, dans le paramètre background, nous ajoutons le chemin d'accès à l'image et définissons la position de l'image par rapport à l'écran. Dans nos cas, ce sont le centre et le haut. Cela signifie que l'image sera au centre de l'écran et que son haut sera appuyé contre le haut de l'écran. C'est pour que le visage de la fille soit toujours visible. Si, par exemple, vous disposez d'un arrière-plan abstrait ou de la nature, où vous pouvez voir le ciel, le champ, l'horizon, vous pouvez alors définir les valeurs centre et centre. En général, si vous connaissez CSS, je pense que vous comprendrez. Il est également défini sur fixed , ce qui gèle l'image.

La méthode est très simple, je l'utilise toujours et elle me convient à 100%. Il n'y a qu'une chose. Les anciens navigateurs ne sont pas familiers avec CSS3, donc ceux qui utilisent des versions anciennes ne verront pas le résultat souhaité.

Cette méthode utilise du CSS standard. En substance, c'est aussi simple. On affiche une image dans le corps du site en attribuant id - bg :

Et nous écrivons les styles :

#bg ( position:fixe; z-index: -1; haut:0; gauche:0; largeur min:100%; hauteur min:100%; )

Le positionnement est fixe et s’étend sur tout l’écran, c’est aussi simple que ça :).

jQuery est utilisé ici. Par conséquent, vous devez d’abord connecter la bibliothèque si elle ne l’est pas auparavant.

Après la bibliothèque, nous connectons le script, qui mettra à l'échelle notre arrière-plan

$(window).load(function() ( var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() ( si ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Et à la fin, nous ajoutons des styles pour que tout fonctionne. Ouvrez le fichier de style et ajoutez-y le code suivant :

#bg ( position : fixe ; haut : 0 ; gauche : 0 ; z-index : -1 ; ) .bgwidth ( largeur : 100 % ; ) .bgheight ( hauteur : 100 % ; )

Vous pouvez voir dans les styles que nous avons ajouté un positionnement. Dans ce cas, c'est corrigé. L'image restera un arrière-plan fixe lors du défilement, mais si vous modifiez le positionnement en absolu , l'arrière-plan peut défiler. Soit dit en passant, la même chose peut être faite avec les deux premières méthodes.

Le paramètre est également spécifié - z-index : -1, afin que l'image soit derrière le texte. Si vous n’avez pas de texte devant, vous pouvez supprimer cette option.

La méthode à utiliser dépend de vous. Comme je l'ai écrit ci-dessus, la première méthode est plus proche de moi. C'est le plus simple et pas pire que les autres.

C'est tout, merci pour votre attention. 🙂

Bonjour, geeks de la création de sites et amoureux du Web. Aujourd'hui, je souhaite donner une réponse à une question fréquemment posée non seulement par les débutants, mais parfois aussi par les développeurs : « Comment étirer une image CSS en plein écran ? En fait, cette technique est très simple à mettre en œuvre, mais l’enjeu ici est différent.

Aujourd'hui, il existe de nombreuses méthodes et langages de programmation grâce auxquels une image peut être placée sur tout l'écran. Par conséquent, dans cet article, je parlerai de plusieurs façons de créer une image d'arrière-plan en taille réelle en utilisant CSS, CSS3, jquery et php. Nous allons passer aux choses sérieuses!

Pour faire image de fond adaptatif ; les feuilles de style en cascade ont une propriété de taille d'arrière-plan. Il vous permet de définir la taille fichier graphique par rapport à la dimension onglet ouvert.

Pour cela, il vous suffit d'écrire cette ligne :

taille de l'arrière-plan : 100 % automatique

Le premier paramètre, c'est-à-dire 100% est responsable de l’étirement de l’image horizontalement, le deuxième paramètre – verticalement. Passons maintenant à un exemple.

Exemple avec un corps CSS (arrière-plan : url(http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg) centre sans répétition en haut fixe ; -moz-background-size : 100 % auto ; -webkit- taille d'arrière-plan : 100 % automatique ; -o-background-size : 100 % automatique ; taille d'arrière-plan : 100 % automatique ; couleur : #191970 ; ) div (arrière-plan : #6495ED ; largeur : 86 % ; marge : 14 % 4 % 4% 4% ; remplissage : 35px ; ) h1 ( couleur : #191970 ; ombre du texte : 3px 2px 1px #fff; )

Cette méthode est prise en charge par les navigateurs à partir de la version 10, la version 3 de Safari, Firefox 3.6 et la version 9 d'IE.

Avec la sortie de la spécification CSS3 dans le monde, beaucoup de choses ont été ajoutées au langage des outils pratiques. Ainsi, pour créer un arrière-plan étiré sous la forme d'une image, la même propriété est utilisée que dans le chapitre précédent, mais la taille de l'image n'est pas spécifiée par des pourcentages, mais par le mot spécial cover : background-size : cover. Très pratique, n'est-ce pas ?

Pour voir comment ça marche cette propriété, exécutez l'exemple précédent en modifiant les paramètres background-size sur 100% et auto to cover .

jQuery lui-même est très pratique. Cela facilite le travail avec l'API, l'accès aux différents éléments de code et la mise en œuvre de certaines choses.

Pour que cela fonctionne dans l'exemple cette méthode, vous devez d'abord connecter le script js avec cette ligne :

Ci-dessous, j'ai joint l'exemple de code avec l'implémentation jQuery déjà insérée.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

exemple jQuery< aspectRatio) { $b-g .removeClass() .addClass("b-g-h"); } else { $b-g .removeClass() .addClass("b-g-w"); } } wind.resize(function() { resizeBg(); }).trigger("resize"); }); Planétarium à aire ouverte ! Découvrez les étoiles lointaines, les planètes et les cratères lunaires...

Exemple avec le corps jQuery ( taille d'arrière-plan : couverture ; couleur : #191970 ; ) div ( arrière-plan : #6495ED ; largeur : 86 % ; marge : 14 % 4 % 4 % 4 % ; remplissage : 35px ; ) h1 ( couleur : # 191970 ; text-shadow : 3px 2px 1px #fff; ) #b-g ( haut : 0 ; gauche : 0 ; z-index:-1 ; position : fixe ; ) .b-g-w ( largeur : 100 % ; ) .b-g-h ( hauteur : 100% ; ) $(window).load(function() ( var vent = $(window), $b-g = $("#b-g"), aspectRatio = $b-g.width() / $b-g.height(); fonction resizeBg() (if ((wind.width() / wind.height())< aspectRatio) { $b-g .removeClass() .addClass("b-g-h"); } else { $b-g .removeClass() .addClass("b-g-w"); } } wind.resize(function() { resizeBg(); }).trigger("resize"); }); Planétarium à aire ouverte !

Découvrez les étoiles lointaines, les planètes et les cratères lunaires...

Cette méthode est universelle et supportée par de nombreux navigateurs même lorsque les outils CSS ne fonctionnent pas.

Quelques mots sur la langue elle-même. Php est communément appelé langage de script. Il est utilisé pour écrire le côté serveur des applications Web, c'est-à-dire connecter le service à la base de données, traiter les demandes, etc. Moi-même code php est intégré au HTML et interagit avec lui de manière flexible.

Pour insérer un morceau de code, vous devez écrire le texte entre parenthèses comme ceci :

Il ne vous reste plus qu'à insérer quelques lignes dans l'exemple d'origine :