2 images de fond avec lien et auto size

Résolu

steve-elipz Messages postés 171 Statut Membre -
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention - 26 août 2014 à 23:04

Bonjour,

j'aimerai divisé ma page en deux verticalement avec 2 images (width 50% et height 100%)

image a.png et image b.png

a savoir: il faut que les deux images en background s'adaptent a l ecran...

en plus de tout cela il faudrait que quand on clic sur image a.png ou b.png cella ouvre un lien sur une nouvelle page...

j ai essayé des dizaines de soluces

index.html avec frameset cols 50,50
dans une frame = a.png (html) et l autre frame = b.png (html) avec du css pour l adaptation de l image

seulement pas de lien href possible... quelqu un pourrait il m aider svp?

voici mon code css pour l adaptation auto des images


<html> 
 <head> 
  <style type="text/css"> 
   head, body{height:100%; width:100%; margin:0; padding:0;} 
   img{position:absolute; top:0; left:0; width:100%; height:100%; z-index:-10;} 
   p{margin:0; padding:0;} 
  </style> 
 </head> 
 <body> 
  <img src="http://www.satkal.org/SATKAL_INDEX/My%20Albums/SATKAL%20NEWS/album/res/bg.gif"/> 
  <div id="header"> 
   
  </div> 
  <div id="content"> 
  </div> 
 </body> 
</html>

Afficher la suite

4 réponses

animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738

salut

voici la solution

<html>
<head>
<style type="text/css">
html {
height:100%;
}

body {
height:100%;
width:100%;
min-height:100%;
margin:0;
padding:0;
font-size:0;
}

#gauche {
display:inline-block;
width:50%;
height:100%;
background: url(a.png);
background-size:cover;
}

#droite {
display:inline-block;
width:50%;
height:100%;
background: url(b.png);
background-size:cover;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function() {
document.getElementById("gauche").onclick = function() {
document.location.href="http://www.tonsite.com/page1";
}; 
document.getElementById("droite").onclick = function() {
document.location.href="http://www.tonsite.com/page2";
}; 
}
</script>
<div id="gauche"></div>
<div id="droite"></div>
</body>
</html>

Réponse 2 / 4
codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123
peut etre que ce code va t'aider :
```
<html> 
 <head> 
  <style type="text/css"> 
   head, body{height:100%; width:100%; margin:0; padding:0;} 
   img{position:absolute; top:0; left:0; width:100%; height:100%; z-index:-10;} 
   p{margin:0; padding:0;} 

#lien1
	{
		background-image: url(http://1.bp.blogspot.com/_zxdOSKs0ASI/TDMqbnatRwI/AAAAAAAAAkM/nB-DxcVcqqk/s1600/Testbeeld.jpg);
	}
	
	#lien2
	{
		background-image: url(http://www.bristolhackneytaxi.com/images/test1.jpg);
		
	}
	
	a
	{
		position: relative;
		display: inline-block;
		margin-left:auto;
		margin-right:auto;
		width: 49%;
		height: 80%;
		background-repeat: no-repeat;
		background-size: 99% 99%;
	}
  </style> 
 </head> 
 <body> 
	 <a id="lien1" href="https://www.w3schools.com/cssref/css3_pr_background-size.asp">
	 </a>
	 <a id="lien2" href="https://www.zonecss.fr/proprietes-css/display-css.html">
	 </a>
 </body> 
</html>
```
0
1. animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738
  
  ton code marche pas
  au lieu de
  head, body{height:100%; width:100%; margin:0; padding:0;}
  fais plutot
  html, body{height:100%; width:100%; margin:0; padding:0;}
  
  head ne s'affiche pas sur une page donc y mettre des attribut css ......
  de plus mettre un height à 100% sur body sans mettre un height 100 % sur html ne sert a rien
  
  d'autre par pour eviter le white space avec inline block il suffit de mettre font-size:0; sur le parent des inline-block (donc les inline-block peuvent être à 50 %)
  
  0
2. codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123
  
  j'ai proposer d'aider, pas de fournir une solution. Le code a été testé sur chrome, il fonctionne.
  Mon code n'as pas de javascript contrairement au tient ...
  
  0
Réponse 3 / 4
steve-elipz Messages postés 171 Statut Membre

merci beaucoup, ca fonctionne super bien

merci merci!!!
0
Réponse 4 / 4
steve-elipz Messages postés 171 Statut Membre

ah j ai parlé trop vite.... lorsque l'ecran est reduit ou en affichage plus petit... l'image se coupe...

une solution?

<html>
<head>
<style type="text/css">
html {
height:100%;
}

body {
height:100%;
width:100%;
min-height:100%;
margin:0;
padding:0;
font-size:0;
}

#gauche {
display:inline-block;
width:50%;
height:100%;
background: url(background2.png);
background-size:cover;
position:relative;
}

#droite {
display:inline-block;
width:50%;
height:100%;
background: url(background3.png);
background-size:cover;
position:relative;
z-index:1;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function() {
document.getElementById("gauche").onclick = function() {
document.location.href="test1.html";
};
document.getElementById("droite").onclick = function() {
document.location.href="test2.html";
};
}
</script>
<div id="gauche"></div>
<div id="droite"></div>
</body>
</html>
0
1. codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123
  
  Avec mon code les images ne ce chevauche cependant les erreurs que animostab a relevée sont a suivre pour avoir un code plus propre.
  
  0

2 images de fond avec lien et auto size

4 réponses

Discussions similaires

Newsletters