Comment étirer une image de fond pour remplir une page Web

Précédent ◈ Suivant

Si vous commencez à travailler avec des images d'arrière-plan, vous serez sans doute courir dans le scénario où vous voulez une image pour « étirer » pour adapter la page.

La meilleure façon d'étirer une image pour adapter l'arrière-plan d'une page est d'utiliser la propriété CSS3, pour « background-size ». Voici un exemple qui utilise une image d'arrière-plan pour le « corps » d'une page et Wich définit la taille de « 100% » de sorte qu'il sera toujours étirer pour adapter à l'écran.

body background: url (bgimage.jpg) no-repeat;
Taille de fond: 100%;
>

Selon caniuse.com. cette propriété fonctionne dans IE 9 # 43 ;, Firefox 4 # 43 ;, Opera 10.5 # 43 ;, Safari 5 # 43 ;, Chrome 10.5 # 43 ;, et sur tous les principaux navigateurs mobiles. Cela vous couvre pour tous les navigateurs modernes disponibles aujourd'hui, qui signifie que vous devez utiliser cette propriété sans craindre que cela ne fonctionnera pas sur l'écran de quelqu'un.

Faking un arrière-plan étirées dans anciens navigateurs

Il est très peu probable que vous auriez besoin pour soutenir tous les navigateurs de plus de IE9, mais supposons que vous craignez que IE8 ne supporte pas cette propriété. Dans ce cas, vous pouvez simuler un fond tendu. Et vous pouvez utiliser les préfixes pour navigateur Firefox 3.6 (-moz-background-size) et Opera 10.0 (taille--o-fond).

La meilleure façon de fausse image un fond tendu est d'étirer sur toute la page. Ensuite, vous ne finissent pas avec l'espace supplémentaire ou à vous inquiéter que votre texte inscrit dans la zone tendue. Voici comment faire:

Tous vos contenus ici - y compris les en-têtes, paragraphes, etc.

Apprendre quelque chose de nouveau chaque jour

Faking un arrière-plan Tendues image sur un espace plus petit

Vous pouvez utiliser une technique similaire à l'image d'un faux fond tendue sur un DIV ou un autre élément sur votre page Web. Ceci est un peu plus compliqué que vous devez soit utiliser le positionnement absolu ou ont d'étranges problèmes d'espacement pour les autres parties de votre page.

  1. Placez l'image sur la page que je veux utiliser comme arrière-plan.
  2. Dans la feuille de style, de définir une largeur et la hauteur de l'image. Notez que vous pouvez utiliser des pourcentages pour la largeur ou de la hauteur, mais je trouve plus facile d'ajuster les valeurs de longueur pour la hauteur. img # largeur bg: 20em;
    hauteur: 30em;
    >
  3. Placez votre contenu dans un div avec l'id « contenu » comme nous l'avons fait ci-dessus:

Tout votre contenu ici

  • Style de la div contenu soit la même largeur et hauteur que l'image de fond: div # largeur de contenu: 20em;
    hauteur: 30em;
    >
  • Placez ensuite le contenu à la même hauteur que l'image. Donc, si votre image est 30em vous auriez un style de haut: -30em; Ne pas oublier de mettre un z-index de 1 sur le contenu. la position #content: relative;
    top: -30em;
    z-index: 1;
    largeur: 20em;
    hauteur: 30em;
    >
  • Ensuite, ajoutez dans un z-index de -1 pour IE 6 utilisateurs, comme vous l'avez fait ci-dessus:

    • Encore une fois, avec « background-size » en profitant du large soutien du navigateur, il le fait maintenant, cette approche est également très probable inutile et présenté comme un produit d'une époque passée. Si vous ne souhaitez utiliser cette approche, juste être sûr de le tester en autant de navigateurs que vous le pouvez. Et si votre contenu change la taille, vous aurez besoin de changer la taille de votre récipient et de l'image d'arrière-plan, sinon, vous vous retrouverez avec des résultats étranges.

    Afficher l'article complet

    Articles Liés

    Précédent ◈ Suivant