Mettre une image sur toute la page cliquable
Fermé
mcrash
Messages postés
1
Date d'inscription
jeudi 26 novembre 2015
Statut
Membre
Dernière intervention
26 novembre 2015
-
26 nov. 2015 à 17:03
weetabix40 Messages postés 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 - 27 nov. 2015 à 23:24
weetabix40 Messages postés 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 - 27 nov. 2015 à 23:24
A voir également:
- Mettre une image sur toute la page cliquable
- Supprimer une page word - Guide
- Traduire une page web - Guide
- Créer une page facebook - Guide
- Image iso - Guide
- Page d'accueil iphone - Guide
2 réponses
telliak
Messages postés
3655
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
27 mars 2024
875
27 nov. 2015 à 21:30
27 nov. 2015 à 21:30
Salut,
Je comprends pas trop ce que tu veux faire exactement, mais cela ne me paraît pas être le mieux pour débuter...
Je comprends pas trop ce que tu veux faire exactement, mais cela ne me paraît pas être le mieux pour débuter...
weetabix40
Messages postés
9583
Date d'inscription
samedi 12 janvier 2008
Statut
Contributeur
Dernière intervention
28 novembre 2015
1 723
27 nov. 2015 à 23:24
27 nov. 2015 à 23:24
Salut,
Pour ton besoin il faut utiliser du html, css, jquery :
Ton code html :
Ton code CSS :
Ton code JQuery :
Cordialement,
Pour ton besoin il faut utiliser du html, css, jquery :
Ton code html :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre de ta page | IDECLIK Webagency</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<a href="#"><img src="image/bg.jpg" class="imgfull" /></a>
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/background.js" type="text/javascript"></script>
</body>
</html>
Ton code CSS :
img.imgfull {
position:fixed;
top:0;
left:0;
z-index:-1;
}
Ton code JQuery :
function redimensionnement(){
var $image = $('img.imgfull');
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();
});
});
Cordialement,
