Bonjour à tous,
- Je me lance depuis cette nuit dans la refonte de mon site ( http://littlemparis.free.fr/ ) et je commence par la base... de mon design.
A savoir mettre un gif anim hd en plein écran... mais voilux aprés avoir passer la nuit à me familiariser avec les termes css/ javascript/ jQuery car je ne faisais avt que du html sous dreamweaver.
-Je me suis arrêté sur un tuto, que je trouve pas mal. https://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html
Mais malheureusement les barres de défilement apparaissent sur ma page à l inverse que dans l exemple...
Pourriez vous m aider?
Thank you senpai !
voici mon code donc :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>little M paris - xavier.d / 2018 </title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<img src="http://littlemparis.free.fr/www/image/essai.gif" class="superbg" />
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/background.js" type="text/javascript"></script>
<style type="text/css" media="screen">
body {
img.superbg {
position:fixed;
top:0;
left:0;
z-index:-1;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><!-- jQuery est inclus ! -->
<script>
jQuery(document).ready(function(){
function redimensionnement(){
var $image = $('img.superbg');
var image_width = $image.width();
var image_height = $image.height();
var over = image_width / image_height;
var under = image_height / image_width;
var body_width = $(window).width();
var body_height = $(window).height();
if (body_width / body_height >= over) {
$image.css({
'width': body_width + 'px',
'height': Math.ceil(under * body_width) + 'px',
'left': '0px',
'top': Math.abs((under * body_width) - body_height) / -2 + 'px'
});
}
else {
$image.css({
'width': Math.ceil(over * body_height) + 'px',
'height': body_height + 'px',
'top': '0px',
'left': Math.abs((over * body_height) - body_width) / -2 + 'px'
});
}
}
$(document).ready(function(){
// Au chargement initial
redimensionnement();
// En cas de redimensionnement de la fenêtre
$(window).resize(function(){
redimensionnement();
});
});
});
</script>
</body>
</html>
Modifié par xavier75005 (06 Sep 2018 - 22:45)
