web-dev-qa-db-fra.com

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

Je souhaite que l’image d’arrière-plan s’étende et s’étende en fonction de la taille de la fenêtre du navigateur.

J'ai vu des questions sur le dépassement de pile qui font le travail, comme étirer et redimensionner l'arrière-plan CSS par exemple. Cela fonctionne bien, mais je veux placer l'image en utilisant background, pas avec une balise img.

Dans celui-ci 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, le redimensionnement d’une image d’arrière-plan fonctionnera plutôt bien. J'ai essayé ceci exemple le premier , mais cela n'a pas fonctionné pour moi.

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

cssbackground
813
Fábio Antunes

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

Ceci 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. Cependant, une partie de l'image peut ne pas être visible si la largeur/hauteur de l'image redimensionnée est trop grande.

1004
Vashishtha Jogi

Vous pouvez utiliser la propriété CSS3 pour le faire très bien. Il redimensionne le format afin d'éviter toute distorsion de l'image (même si elle redimensionne les petites images). Notez simplement que ce n'est pas encore implémenté dans tous les navigateurs.

background-size: 100%;
461
Matt Burgess

En utilisant le code j'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%;
}

Cela produit l'effet souhaité: 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 toutes les tailles d'écran. Lorsque le contenu ne convient pas à la fenêtre du navigateur et que l'utilisateur doit faire défiler la page, l'image d'arrière-plan reste fixe dans la fenêtre pendant le défilement du contenu.

Avec CSS 3, cela semble beaucoup plus facile.

183
Fábio Antunes

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*/
}
162
user742030
background-size: 100% 100%;

étend l'arrière-plan pour remplir l'élément entier sur les deux axes.

48
yeahdixon

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

Je le fais dynamiquement pour chaque page. Par conséquent, j'utilise 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".

<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 ne disposez que d'une image d'arrière-plan pour toutes les pages, vous pouvez supprimer la variable $pic, supprimer les barres obliques inversées, ajuster les chemins d'accès 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.

39
Thorsten Niehues

Utilisez ce CSS:

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

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

17
Kim Stebel

Vous pouvez ajouter cette classe dans votre fichier CSS.

.stretch {
    background: url(images/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 que ce soit ou plus tard
  • Internet Explorer 9 ou ultérieur
  • Opera 10 ou supérieur (Opera 9.5 supporté background-size, mais pas les mots-clés)
  • Firefox 3.6 ou version ultérieure (Firefox 4 prend en charge la version à préfixe non-fournisseur)
14
Arunraj S

Il est expliqué par des astuces CSS: Image d'arrière-plan parfaite pour la page entière

Démo: https://css-tricks.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;
}
14
Aamer Shahzad

Pour redimensionner correctement vos images en fonction de la taille du conteneur, utilisez les éléments suivants:

background-size: contain;
background-repeat: no-repeat;
10
justinpees

J'utilise ceci, et cela fonctionne avec tous les navigateurs:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>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.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
9
Mahdi jokar

Merci!

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

Essayez de définir height:auto;min-height:100%;

Alors changez cela pour votre ligne height:100%;, 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é, j'ai ceci dans mon DrupalTend themes style.css:

html, body {height: 100%;}

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

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

<img alt = "" class = "stretch" src = "pic.url" />

Copier simplement une image avec l'éditeur dans ce bloc Drupal ne fonctionne pas; il faut changer l'éditeur en texte non formaté.

8
Cybr

Je suis d'accord avec l'image en div absolu avec 100% largeur et hauteur. Assurez-vous de définir 100% largeur et hauteur pour le corps dans le CSS et de définir les marges et le remplissage à zéro. Cette méthode pose également un autre problème: lors de la sélection de texte, la zone de sélection peut parfois englober l’image d’arrière-plan, ce qui a pour effet malheureux de faire passer l’état sélectionné à l’ensemble de la page. Vous pouvez contourner cela en utilisant la règle CSS user-select:none CSS, comme ceci:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Encore une fois, Internet Explorer est le méchant ici, car il ne reconnaît pas l'option de sélection de l'utilisateur - même pas Internet Explorer 1 l'aperçu la prend en charge, vous avez donc la possibilité d'utiliser JavaScript pour éviter l'arrière-plan sélection d'images (par exemple, http://www.felgall.com/jstip35.htm ) ou à l'aide de la méthode CSS background-stretch.

En outre, pour SEO , je placerais l'image d'arrière-plan au bas de la page, mais si l'image d'arrière-plan prend trop de temps à se charger (c'est-à-dire avec un arrière-plan blanc au départ), vous pouvez déplacer en haut de la page.

8
Myke Black

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

INLINE IMAGE: ------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

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

Utilisez le plugin Backstretch . On pourrait même avoir plusieurs images en diapositive. Cela fonctionne également dans des conteneurs. Ainsi, par exemple, une partie de l’arrière-plan pourrait être recouverte d’une image d’arrière-plan.

Même si je pouvais le faire fonctionner, cela prouve que c'est un plugin facile à utiliser :).

4
Daniel

J'ai utilisé une combinaison des propriétés CSS de background-X pour obtenir l'image de fond de redimensionnement idéale.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Ainsi, l’arrière-plan recouvre toujours toute la fenêtre du navigateur et reste centré lors de la mise à l’échelle.

4
Ryan Den-Kaat

Si vous souhaitez centrer le contenu horizontalement, utilisez une combinaison comme celle-ci:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Cela sera beau.

3
Samuel Ramzan

Utilisez ce CSS:

background-size: 100% 100%

2
shady sherif

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 par-dessus.

La propriété _border-image_ est très utile si votre feuille de style est implémentée dans un endroit qui ne prend pas en charge CSS 3. Si vous utilisez Google Chrome ou Firefox, je vous recommande la propriété _background-size:cover_ lui-même.

1
Natesh bhat

Voulez-vous atteindre cet objectif en utilisant une seule image? Parce que vous pouvez réellement faire un peu semblable à un fond d'étirement en utilisant deux images. PNG images par exemple.

Je l'ai déjà fait auparavant, et ce n'est pas si difficile. En outre, je pense que les étirements nuiraient à la qualité du fond. Et si vous ajoutez une image énorme, cela ralentira les ordinateurs et les navigateurs lents.

0
MarioRicalde