18041 sujets

Questions générales et questions de débutants

[Résolu] Background qui s'adapte à la taille de la fenêtre du navigate

Pages :
Bonsoir à tous,

Je suis toute neuve sur ce forum et je suis bien contente de confier mes peines (oui oui) à cette communauté qui à l'air super chouette Smiley smile

Eh oui, sujet éculé, vu, revu et re-revu. Cependant, j'ai eu beau essayer de nombreuses solutions (css pur avec du background cover, des media queries et même du js) je ne suis jamais satisfaite du resultat.

Voici mon script (ultra basique): 

<!DOCTYPE html>
<html>
	<HEAD>
		<meta charset = "utf-8" />
		<title> Charlotte Sirot </title>

		<link rel="stylesheet" type="text/css" href="style.css">


	</HEAD>
	
	<BODY>


<div id = "cadre1"> 

</div>
	</BODY>
</HTML>


#cadre1{
  background-image: url("image1.JPG");
  background-size: cover; 

    
}


Après avoir vu sur des tonnes de forums que ce script permettait de redimensionner la taille de l'image du background pour qu'elle s'adapte à la fenêtre ??? Moi je dis non, mon image n'est affichée qu'en partie et des scroll bar sont apparues !! Pour moi ce script ne permet pas un redimensionnement de l'image mais juste d'afficher l'image en entier peu importe si elle dépasse de la fenêtre!!!

Du coup je voulais savoir pourquoi chez moi ça marche pas ??? (j'ai pas dû bien comprendre la réponse, comme dirait mon paternel). Comment faire pour que la hauteur de ma fenêtre redimensionne mon image ???

Et puis tout cela m'amène à demander un conseil moins technique mais plus philosophique: je souhaite réaliser un site qui donne une grande importance au image en background. Ce site doit se présenter sur une seule page avec des ancres (un peu comme ca http://aquatilis.tv/). Pour moi, ce qui est important c'est que l'utilisateur ait l'image du bg en entier ou tout du moins que l'image ne soit pas tronquée en hauteur. Comme mon image est plutot en mode paysage, sur les medias typés paysage je souhaiterais que le navigateur impose la hauteur de fenêtre et se débrouille en rajoute de la largeur au tour de l'image si besoin et sur les medias typés portraits le nav mettrait une scroll bar en bas.J'ai beaucoup (beaucoup) tâtonné, cherché des solutions mais je n'arrive pas à me décider pour une de ces techniques: background cover, media queries ou js ??? Oui dernière petite remarque, j'aimerais que les utilisateurs puissent zoomer et dezoomé sans que la mise en page ne se soit changée...Oui je sais ça fait beaucoup d’exigence (mais qui peut le plus peu le moins Smiley smile

Donc je résume:
- un site d'une seule page (et donc avec plusieurs div les unes en dessous des autres)
- un bg qui s'adapte à la taille de la fenêtre (au moins en hauteur)
- possibilité de zoomer sans changer la mise en forme

Que me conseilleriez vous comme technique ?

Merci pour vos réponses mais aussi et surtout pour le temps que vous avez mis à lire ce topic Smiley smile !!!!!

La bise à tous

cha
Modifié par boubchat (18 Aug 2015 - 01:58)
Bonjour.
Il faut passer via JS par l'objet new Image() qui va vous permettre d'en obtenir les dimensions !...
Ensuite après un simple calcul de proportion, vous viendrez modifier le style du background.
En reprenant votre code HTML, cela donne : 
<!DOCTYPE html>
<html><body>
     <style type="text/css">
          #cadre1 {
              width: 800px; height: 600px;
              border: 1px solid;
              background: url("images/image1.jpg");
              background-repeat: no-repeat;
              }
     </style>
     <script type="text/javascript">
          function re_dimentionner()  {
               myImg = new Image() ; 
               myImg.src = "images/image1.jpg" ;
               rapport = 600 / myImg.height ;               
               largeur = Math.round( myImg.width * rapport ) ;               
               alert ( largeur + " x " + "600" ) ;                
               cadre1.style.backgroundSize = largeur + "px " + "600px";
               }
     </script>
</head><body onload="re_dimentionner()">     
     <div id="cadre1"></div>
</body></html>
P.S : Des résultats inesthétiques surviendront si la définition de votre <div> est incohérente avec le format de l'image :
- Si votre div est trop large : du blanc à droite,
- Si elle est trop étroite : une image tronquée et non centrée...
Modifié par ht1cd (19 Aug 2015 - 14:14)
Merci beaucoup pour votre réponse ht1cd

Le problème c'est que le script que vous m'avez fourni ne marche pas chez moi. Je m'explique

Lorsque je le mets sur mon écran principal il m'affiche 905 * 600 (alors que mon écran est en 1600 * 900, du coup je ne comprends pas trop car je m'attendais plus à des valeurs autour de 1500*550) et l'image est petite en haut a gauche (cf PJ du message, écran de gauche). Je me dis qu'il faut juste que je change les proportions.

Mais sur mon écran 1024*768, il m'affiche aussi 905 * 600 et l'image n'a pas la même proportion.

je pense que c'est dû au cadre dont la taille est fixe.

De plus, lorsque je diminue la taille de la fenêtre du navigateur pas d'effet alors que je voudrais qu'il se redimensionne.

Est-ce que tout cela est normal ? est-ce que j'ai pas compris quelque chose ? Comment faire pour que la div prenne toute la hauteur de l'ecran ?
j'ai pensé qu'il fallait que j'adapte les dimensions de la div aussi, mais je n'y arrive pas avec le script de ht1cd

En tout cas merci infiniment de votre aide ! upload/59416-PS.jpg
Je vous fais remarquer que le code initial fait état d'une <div> dont vous n'avez pas donné les dimensions !...
j'ai donc pris des libertés avec la taille de cette div !... dans mon exemple 800 x 600...
j'adapte ensuite le background en fonction du paramètre hauteur, celui que vous avez souhaité privilégier...

Il faudrait nous donner un peu plus de code pour voir ce qui ne convient pas : Notamment la taille de votre <div> et celle aussi de votre image "images/image1.jpg"...

P.S : Etes vous sûr(e) de vouloir appliquer un background-image sur une <div> comme prévu initialement, ou alors sur tout le <body> ?...
Prenez le temps de bien décrire ce que vous voulez réaliser !...
Modifié par ht1cd (19 Aug 2015 - 09:32)
Merci de votre réponse si rapide Smiley smile

Alors oui, mon image1 est relativement grande pour l'instant 1600*1060 px (à voir si je la redimensionne pour la suite ou non, c'est un autre débat, enfin je pense) et je n'avais pas fixé la taille de la div parce que je souhaite tout simplement que celle-ci s'adapte à la taille du média qui l'affiche.

je vous mets un bout du code pour que vous cerniez mieux mon problème :

<!DOCTYPE html>
<html>
  <HEAD>
    <meta charset = "utf-8" />
    <title> Charlotte Sirot </title>

         <style type="text/css">
body {
    
   background-color: rgba(0, 0, 18,1);
}

p{
  color: white;
}

h2{
  background-color: rgba(0,0,0,0.3) ;
  margin-left: 100px;
  margin-top: 0px;
  color : white;
  text-align: center;
}

h3{
  color:white;
}

a.type1 { color: white; }
a.type1:hover { color: white;}

a.type2 { color: rgb(3,1,31); }
a.type2:hover { color: white;}

/* *********************************************
NAVBAR
***********************************************/

.image{
  display: inline;
  width:125px;

}

/*enlever les pointillés après le clique sur les hypertext*/
a:focus
{
outline:0;
}

#nav{  
  width:780px;
  height:120px;
  background:rgba(0,0,0,0.3);
  border-radius : 150px 150px;  
  padding-left: 20px;
  padding-top: 20px;
  margin-left: 55px;
}

#navBis{
   width: 1600px;
   height:200px;
   position: fixed;
   bottom: -25px;
   left: 50%;
   margin-left: -800px;
}

/* *********************************************
Contenu page 1
***********************************************/

#cadre1{
  background-image: url("image1.JPG");
  background-repeat: no-repeat;
  background-position: top center; 
  background-color: none;
  width:1600px;
  height: 1060px;
  margin:auto;
  border-style: solid;
    
}

#cadreContact{
  background-color: rgba(0,0,0,0.3);
  color:white;
  padding-left: 20px;
  padding-right: 20px;
  font-size: large;
}

#centrage{
  background-color: white;
  margin-left: 1000px;
  margin-top: 0px;
}

#contenuText0{
    background-color: rgba(0,0,0,0.3);
    color: white;
    margin-left: 85px;
    width:700px;
    word-wrap: break-word;
    padding: 15px;
    font-size: medium;
    text-align:justify;
}

/* *********************************************
Contenu page 2
***********************************************/
#cadre2{
  background-image: url("page2.JPG");
  background-repeat: no-repeat;
  background-position: top center; 
  background-color: none;
  width:1600px;
  height: 2200px;
  margin:auto;
  border-style: solid;
    
}

.titre1{
  width:800px;
  margin-left: 650px;
  height:20px;
}

.titre2{
  width:1200px;
  height:20px;
}

#contenuText{
    background-color: rgba(0,0,0,0.3);
    color: white;
    margin-left: 650px;
    margin-bottom: 0;
    width:850px;
    word-wrap: break-word;
    padding: 20px;
    font-size: small;
    text-align:justify;
}

#contenuTextBis{
    background-color: rgba(0,0,0,0.3);
    color: white;
    margin-left: 100px;
    margin-top: 0px;
    width:1380px;
    word-wrap: break-word;
    padding: 20px;
    font-size: small;
    text-align:justify;
}

.block {
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}

.imageAcliquer{
  display: inline-block;
  height: 125px ;
}


     </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
    $('.scrollTo').click( function() { // Au clic sur un élément
      var page = $(this).attr('href'); // Page cible
      var speed = 750; // Durée de l'animation (en ms)
      $('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
      return false;
        });
        });
    </script>
       
    <script>  var hauteur_fenetre = $(window).height(); </script>

  </HEAD>
  
  <BODY>
    
      <div id = "navBis">
        <div id = "nav">
          <a href="#cadre1" class="scrollTo" onMouseOver="document.img_1.src='page1bis.png';" onMouseOut="document.img_1.src='page1.png';" ><img src="page1.png" height= 100px class="img" name="img_1"></a>&nbsp;&nbsp;&nbsp;&nbsp;

          <a href="#cadre2" class="scrollTo" onMouseOver="document.img_2.src='page2bis.png';" onMouseOut="document.img_2.src='page2.png';" ><img src="page2.png" height= 100px class="img" name="img_2"></a>&nbsp;&nbsp;&nbsp;&nbsp;

          <a href="#cadre3" class="scrollTo" onMouseOver="document.img_3.src='page3bis.png';" onMouseOut="document.img_3.src='page3.png';" ><img src="page3.png" 
          height= 100px class="img" name="img_3"></a>&nbsp;&nbsp;&nbsp;&nbsp;

          <a href="#cadre4" class="scrollTo" onMouseOver="document.img_4.src='page4bis.png';" onMouseOut="document.img_4.src='page4.png';" ><img src="page4.png" 
          height= 100px class="img" name="img_4"></a>&nbsp;&nbsp;&nbsp;&nbsp;

          <a href="#cadre5" class="scrollTo" onMouseOver="document.img_5.src='page5bis.png';" onMouseOut="document.img_5.src='page5.png';" ><img src="page5.png" 
          height= 100px class="img" name="img_5"></a>&nbsp;&nbsp;&nbsp;&nbsp;

          <a href="#cadre6" class="scrollTo" onMouseOver="document.img_6.src='page6bis.png';" onMouseOut="document.img_6.src='page6.png';" ><img src="page6.png" 
          height= 100px class="img" name="img_6"></a>&nbsp;&nbsp;&nbsp;&nbsp;

        </div>

      </div>

<div id = "cadre1"> 

  <div  id ="cadreContact" >
    <div style = "display: inline">
      <img src = "contactbis.png" height= 80px class="block" style = "margin-top: 5px"> 
      <div class="block">  
        <br/>  
        <p style = "font-size : medium; margin-top: 1px" > 
          charlott[dot]sirot[at]gmail.com 
        </p>  
        <p style = "font-size : medium; margin-top: 1px" > 
          +33 (6) 50 22 54 90 
        </p>
        </div> 
    </div>

    <div style = "display: inline; " >
      
      <div class="block">
        <br/>
        <p style = "font-size : medium; margin-top: 0px;margin-left: 755px" > 
          UMR MARBEC - UM2 - bât 24 - CC093
        </p>  
        <p style = "font-size : medium; margin-top: 0px; margin-left: 755px" > 
         34095 Montpellier cedex 5
        </p>
        </div> 
        <img src = "contact2.png" height= 60px class="block" style = "margin-top: 18px;  margin-right: 3px"> 
    </div>
  </div>





</div>

<div id = "cadre2"> 
  
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>

  <p id = "contenuText"> Ph.D. (2011-2014) - University of Montpellier II (UMR ECOSYM ecology of coastal marine ecosystems - Montpellier - France) </p>

  <br/>
  <br/>

  <h2 class = "titre1" > Using biological traits to understand demographic responses of lagoon fishes to environmental changes </h2>

</div>


  </BODY>
</HTML>


Ce que je souhaiterais c'est que mon site apparaisse comme en pj sur tout les media quel qu'en soit la taille.
C'est pourquoi j'avais mis les images dans une div et non dans le body. Après j'ai essayé de mettre l'image dans le body, comme vous m'aviez conseillé mais ici encore selon la taille de l'écran l'image n’apparaît pas sur toute sa hauteur ... Smiley bawling
Ca fait un mois que le contenu est fini et que je n'arrive pas faire cette satanée mise en page !!! Smiley biggol

upload/59416-A.jpg

Merci encore de votre patience Smiley smile
Modifié par boubchat (18 Aug 2015 - 13:19)
Humm !...
Vous voulez en fait faire du 'responsive', alors qu'apparemment vous n'aviez pas cette optique dès le début de la conception...
Votre 'navBis' est figé : 1600 x 200, tout comme ' cadre1' 1600 x 1060, idem pour 'cadre2' 1600 x 2200...
Ces dimensions vont inévitablement entraîner l'apparition d'une scroll-bar horizontale !... Non ?...

J'ai l'impression qu'il est un peu tard (de 14 juillet) pour tout restructurer, et je ne sais que vous conseiller...
Par ailleurs le 'one-page' n'étant pas ma tasse de thé, je n'oserais vous aider davantage...

Cordialement.
Bon bah voila une réponse ! Du responsive design alors!!
Est-ce que d'autres ont cette conclusion ?

Juste par curiosité pourquoi n'êtes vous pas fan du "onepage" ?

Merci en tout cas Smiley smile
One-page entraîne, une trop grosse concentration de code, un inévitable scroll ou des ancres dont je ne suis pas fan....
Je préfère plusieurs pages courtes, chacune ayant, 'its navbar' en include, et un CSS 'linked' ad-hoc...
P.S : Le code donné fonctionne !... Il pourrait même vous servir... A vous de l'adapter !...
Modifié par ht1cd (19 Aug 2015 - 11:10)
Bonjour,

Pour revenir à la question initiale :
#cadre1 {
  background-image: url("image1.jpg");
  background-size: cover; 
}

... ce code est juste. Mais encore faut-il définir les dimentions de #cadre1... non ?

Il faut donc ajouter au moins une hauteur :
#cadre1 {
  min-height: 100vh; /* hauteur minimum égale à la hauteur de l'écran */
  background-image: url("image1.jpg");
  background-size: cover; 
}

Une démo en ligne avec un onepage : Scriptura with OnePage
Modifié par Olivier C (18 Aug 2015 - 16:56)
@ Olivier : Bonjour.
T'as pas tout lu !... Les dimensions de #cadre1 ont été données dans la discussion !...
Modifié par ht1cd (18 Aug 2015 - 17:04)
Tout d'abord merci infiniment pour vos réponses !

Oui je les avais données mais je pense qu'Olivier a tout à fait compris ma démarche.

J'ai donc mis à l'execution la ligne de code d'Olivier que je ne connaissais pas d'ailleurs !!!!

effectivement la DIV est bien = la hauteur de l'écran. C'est NICKEL !!!!!!!!
le problème maintenant c'est que du coup l'image en bg est trop grande et ne rentre plus dans la div Smiley biggol

hhhhhhhhhhhaaaaaaa !!!!!!!!!!!!!!!!!!!

est-ce que vous auriez une idée de comment faire rentrer l'image au moins en hauteur ?
Et après j'arrête de vous embêter !! Smiley sweatdrop

obligé de faire du JS ?? de reprendre le script de ht1cd ?

Merci beaucoup en tout cas, cette discussion est bien intéressante Smiley smile
Salut,

Est-ce quelque chose comme ceci : http://codepen.io/korell/full/aOreWa que tu cherches à faire ?

Le code est là : http://codepen.io/korell/pen/aOreWa.

Comme l'a dit Quentin, il faut que tu forces la hauteur de ton bloc sur lequel tu mets le background. Il faudra juste faire attention au bug avec l'utilisation de "vh" sur iOS Safari <= 7.1 (https://gist.github.com/pburtchaell/e702f441ba9b3f76f587)

Pas besoin de JS pour ça, en html5, les backgrounds ont beaucoup évolués...
Modifié par MatthieuR (19 Aug 2015 - 13:04)
Merci pour ta réponse Matthieu

Malheureusement j'avais déjà testé cette solution et elle ne me convient guère puis que lorsque les dimensions du média ne correspondent plus aux dimensions de l'image (en rapport, par exemple si le rapport Longueur / largeur du média > Longueur / largeur photo) alors la une partie de ma photo disparait. Moi dans ces cas là je voudrais que l'image grandissent en conservant les rapports et au besoin face apparaitre des bandes du bg color de part et d'autre de l'image (comme je ne savais pas si mon explication était assez clair je vous mets une pj, une image parle généralement bien Smiley lol ).

Est-ce que je suis obligé de faire du mediaqueries pour cela ?



upload/59416-PS1.jpg

upload/59416-PS2.jpg
Modifié par boubchat (19 Aug 2015 - 15:30)
Ok, je n'avais pas bien suivi que tu ne voulais pas tronquer ton image.
Si tu autorises des marges autour de ton image alors il faut utiliser la propriété "background-size: contain;" et le tour est joué !
"cover" est fait pour avoir une image qui recouvre entièrement l'élément alors que "contain" affichera toujours l'ensemble du contenu (la page de référence)
Tu peux retourner voir sur CodePen, l'image ne sera jamais tronquée...
Modifié par MatthieuR (19 Aug 2015 - 16:17)
Bon c'est exactement ce que je cherchais!! C'est nickel. MEEEEEERRRRRCCCCCIIII mille fois Matthieu

Dernière (vraiment cette fois-ci Smiley lol ) petite question : Du fait que mon site se base sur des photos en mode paysage, mon site ne s'adaptera pas bien sur les tablettes et mobiles en mode portrait (voir PJ). Comment font généralement les web developpeurs dans ces cas ?

Ce que je pensais c'est rajouter un peu de media queries (et de JS pour détécter la rotation du telephone) si le rapport Longueur/largeur du media passait en dessous du rapport de ma photo, mon script irait alors chercher des photos que j'aurais retaillé en mode portrait ?

Qu'est ce que vous en pensez ? est-ce que c'est comme ca que les gens font d'habitude avec ce type de site ???

Merci beaucoup en tout cas

upload/59416-PS.jpg
Modifié par boubchat (19 Aug 2015 - 16:38)
Ton raisonnement est exact concernant les media queries (aucun besoin de JS encore une fois... uniquement du CSS, quand on peut c'est mieux !)

Tu peux détecter en effet l'orientation du device et charger une image différente. En plus tu te facilites les choses car tu utilises des images en background, donc tout à fait adaptées aux adaptations CSS).

Par exemple, tu pourrais avoir toujours 2 versions de ton image (image_paysage.jpg et image_portrait.jpg) et selon cette condition tu changes :

body{
  margin:0;
  padding: 0;
}
#cadre1{
  min-height: 100vh;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,0.3);
}
.contenu{
  text-align: center;
  padding-top: 50px;
  color: white;
  font-family: sans-serif;
  font-size: 50px;
}

@media only screen and (orientation : landscape){
  #cadre1{
    background-image: url("image_paysage.jpg");
  }
}
@media only screen and (orientation : portrait){
  #cadre1{
    background-image: url("image_portrait.jpg");
  }
}
Ok j'ai tout pigé !

Bon bah c'est nickel ! Le sujet a été rondement mené grâce à vous tous, merci à tous !

A très bientôt !!
Modifié par boubchat (19 Aug 2015 - 17:22)
Pages :
Sujet clos
Aller à