Étirer et dimensionner une image CSS en arrière-plan - avec CSS seulement
je veux que mon image d'arrière-plan s'étire et se dimensionne en fonction de la taille du viewport du navigateur.
j'ai vu quelques questions sur le débordement de la pile qui font le travail, comme Stretch and scale CSS background par exemple. Cela fonctionne bien, mais je veux placer l'image en utilisant background , pas avec une étiquette img .
dans celui-ci est placé une étiquette img , et ensuite avec CSS nous rendons hommage à l'étiquette img .
width:100%; height:100%;
cela fonctionne, mais cette question est un peu vieille, et indique que dans CSS 3 redimensionner une image de fond fonctionnera assez bien. J'ai essayé ce exemple le premier , mais ça n'a pas fonctionné pour moi.
y a-t-il une bonne méthode pour le faire avec la déclaration background-image ?
18 réponses
CSS3 a un joli petit attribut appelé background-size:cover .
ceci réduit l'image de sorte que la zone d'arrière-plan soit entièrement couverte par l'image d'arrière-plan tout en maintenant le rapport d'aspect. 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 pour ne pas déformer l'image (bien qu'il fasse des petites images haut de gamme). Notez juste, il n'est pas encore implémenté dans tous les navigateurs.
background-size: 100%;
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%;
}
Qui produit l'effet désiré: seul le contenu de défilement, pas le fond.
l'image d'arrière-plan est redimensionnée à l'affichage du navigateur pour n'importe quelle taille d'écran. Lorsque le contenu ne correspond pas au viewport du navigateur, et que l'utilisateur doit faire défiler la page, l'image de fond reste fixe dans la fenêtre d'affichage pendant que le contenu défile.
avec CSS 3 il semble que ce serait beaucoup plus facile.
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*/
}
background-size: 100% 100%;
étire bg pour remplir l'élément entier sur les deux axes
la partie CSS suivante devrait étirer 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 photos 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 n'avez qu'une image de fond pour toutes les pages, vous pouvez supprimer la variable $pic , supprimer les rétroflagrations, 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.
utiliser cette CSS:
background: url('img.png') no-repeat;
background-size: 100%;
vous pouvez réellement obtenir le même effet qu'une image de fond avec la balise img. Il suffit de régler son index z plus bas que tout le reste, de définir la position:absolute et d'utiliser un fond transparent pour chaque boîte au premier plan.
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;
}
Il travaille:
- Safari 3 ou plus tard
- Chrome Quel que soit le ou, plus tard,
- Internet Explorer 9 ou plus tard
- Opéra 10 (ou version ultérieure Opera 9.5 pris en charge
background-size, mais pas les mots clés) - Firefox 3.6 ou plus (Firefox 4 prise en charge non-fournisseur préfixé version)
expliqué par CSS-trucs https://css-tricks.com/perfect-full-page-background-image /
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;
}
afin de dimensionner vos images en fonction de la taille du conteneur est le suivant:
{
background-size:contain;
background-repeat: no-repeat;
}
j'utilise ceci, et il 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>
je suis d'accord avec l'image dans absolute div avec 100% largeur et hauteur. Assurez-vous de définir 100% largeur et hauteur pour le corps dans le CSS et de fixer les marges et le rembourrage à zéro. Une autre question que vous trouverez avec cette méthode est que lors de la sélection de texte, la zone de sélection peut parfois englober l'image de fond, ce qui a l'effet malheureux de faire la page complète ont l'état sélectionné. Vous pouvez contourner cela en utilisant la règle 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 mauvais gars ici, parce qu'il ne reconnaît pas l'option de sélection de l'Utilisateur-pas même Internet Explorer 10 l'aperçu le soutient, de sorte que vous avez l'option d'utiliser soit JavaScript pour empêcher la sélection d'image de fond (par exemple, http://www.felgall.com/jstip35.htm ) ou en utilisant la méthode CSS 3 background-stretch method.
aussi, pour SEO I mettrais l'image d'arrière-plan au bas de la page, mais si l'arrière-plan de l'image prend trop de temps à charger (c'est à dire avec un fond blanc au départ), vous pouvez déplacer vers le haut de la page.
Merci!
mais alors il ne fonctionnait pas pour le Google Chrome et Safari navigateurs (stretching travaillé, mais la hauteur des photos était seulement 2 mm!) , jusqu'à ce que quelqu'un me dise ce qui manque:
Essayer de définir
height:auto;min-height:100%;
ainsi changer que 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 Drupal Tendu thèmes style.css :
html, body{height:100%;}
# page{background:#ffffff; height: auto !important; hauteur: 100%; min-Hauteur: 100%; position: relative;}
puis je dois faire un nouveau bloc dans Drupal avec l'image tout en ajoutant class=stretch :
< img alt="" class="stretch" src= " pic.URL>/ "
simplement copier une image avec l'éditeur Dans ce bloc Drupal ne fonctionne pas; il faut changer l'éditeur en texte non formaté.
je voulais centrer et dimensionner une image de fond, sans l'étirer sur toute la page, et je voulais que le rapport d'aspect soit maintenu. Cela a fonctionné pour moi, grâce aux variations suggérées dans d'autres réponses:
IMAGE EN LIGNE: ------------------------
<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%;
}
utilisez le Backstretch plugin. On pourrait même avoir plusieurs diapositives d'images. Il fonctionne également dans des conteneurs. De cette façon, on pourra par exemple avoir seulement une partie de l'arrière-plan était recouvert d'une image d'arrière-plan.
depuis même que j'ai pu le faire fonctionner prouve qu'il s'agit d'un plugin facile à utiliser :).
vous pouvez utiliser la propriété border-image : yourimage pour monter l'image jusqu'à la bordure , même si vous donnez l'image de fond , alors l'image de 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 propriété background-size:cover elle-même.
voulez-vous atteindre ce juste en utilisant une image? Parce que vous pouvez en fait faire un peu similaire à un fond d'étirement en utilisant deux images. PNG images par exemple.
j'ai déjà fait ça, et ce n'est pas si difficile. En outre, je pense que stretching nuirait à la qualité de l'arrière-plan. Et si vous ajoutez une image énorme il ralentirait les ordinateurs lents et les navigateurs.