1
Est-il possible de redimensionner l'image d'arrière-plan d'une page Web lorsque la fenêtre du navigateur est redimensionnée?Fond redimensionnable sur le site Web
A
Répondre
2
Le code suivant montre comment faire une image de fond croix navigateur:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Cross Browser Background</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#content {
z-index: 1; /* The content should be above the background image */
margin: 20px 30px;
background-color: #000;
color: #FFF;
padding: 10px 15px;
/* Just add some fancy transparency */
opacity: .85; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=50); /* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
-khtml-opacity: .50; /* Safari 1.x */
-moz-opacity: .50; /* FF lt 1.5, Netscape */
}
</style>
<!-- IE6 sucks as usual - Add some special code for it -->
<!--[if IE 6]>
<style type="text/css">
html {
overflow-y: hidden;
}
body {
overflow-y: auto;
}
#background {
position:absolute;
z-index:-1;
}
#content {
position:static;
}
</style>
<![endif]-->
</head>
<body>
<img id="background" src="background.jpg" alt="" />
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam placerat justo, in tincidunt purus faucibus quis. Pellentesque facilisis mi id neque laoreet laoreet. Quisque quis metus vitae enim lacinia egestas eu at ipsum. Proin sed justo massa, non consequat lacus. Nullam pulvinar commodo egestas. Vivamus commodo ligula a turpis mattis facilisis. Vestibulum vel massa a lorem pulvinar varius nec ut justo. Donec hendrerit dapibus erat. Aenean interdum, lorem sit amet venenatis tincidunt, augue ipsum tincidunt velit, vel egestas nulla quam non quam. Mauris vulputate libero at purus auctor sed egestas magna vehicula.</p>
</div>
</body>
</html>
2
Si vous utilisez CSS3 vous avez une nouvelle propriété appelée background-size que vous pouvez utiliser comme ceci pour obtenir le résultat souhaité:
body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
Gardez à l'esprit que CSS3 est pas encore totalement pris en charge par tous les navigateurs (spécialement IE) et les résultats peuvent varier selon le navigateur avec lequel vous visualisez la page. Cela dit, j'espère que ça aide!
Si vous voulez quelque chose de plus convivial, vous pouvez envisager une solution javascript qui capturera les redimensionnements des fenêtres et étirer l'image en conséquence.
1
Oui, comme ceci:
<img id="background" src="..." alt="Background Image" />
img#background {
position: absolute;
top: 0;
left: 0;
width: 100%
height: 100%;
}