Bonjour,

Sur http://www.cirtelo.fr/OPC/P1_langer_laurence/index.html dans la première section, accueil, j'ai une image de fond.

J'ai deux difficultés :

• la section (les autres également) ne s'ajuste pas à la taille indiquée en CSS, et en cliquant sur l'ancre des menus, elle se positionne sous le header. J'avais déjà rencontré ce dernier problème, qui devait être résolu par la margin-top:13vh mais non !
• L'image de fond ne s'affiche pas intégralement sur ordinateur et elle se répète lorsque l'on rétrécit la taille de l'écran

Voici le code html de la section :

<section id="accueil">
   <div class="container">
      <div class="element1">
      <article>
      <h1><strong>WEBAGENCY : </strong>L'AGENCE DE TOUS<br> VOS PROJETS !</h1>
     <h4>Vous avez un projet web ? La WebAgency vous aide à le réaliser ! </h4>
      <button><span id="bouton">Plus d'infos</span></button>
      </article>
      </div>
   </div>
   </section>

Et le code CSS des différents éléments :

section
{
    margin-top: 13vh;
	height: 87vh;
}
background-image
{
	background-size: contain;
	margin: 0;
    padding: 0;
    repeat: no-repeat;
    position: bottom-line;
}
#accueil, #services, #portfolio, #contact
{
	width:100%;
	padding-left:0;
	margin-top: 13vh;
	height:87vh;
	margin-bottom:0;
	padding-bottom:0;
}

#accueil
{
    background-image:url(../images/slider/bg1.jpg);
}

Laurence

Bonjour, pour le premier soucis de la section caché par le header fixe, ajoute ceci dans ton CSS et ça fonctionne :

:target::before {
  content: "";
  display: block;
  height: 100px; /* fixed header height*/
  margin: -100px 0 0; /* negative fixed header height */
}

Pour ton deuxième problème, il suffit d'ajouter un background-size:cover; à ton #accueil et n'oublie pas également pour le #accueil dans ton @media

Ps : Petit problème, je pense que tu voudra le régler aussi, c'est lors du rétrécissement de la page, l'image n'est plus visible et sort de la page puisque tu as un background-size:cover; c'est normal.

Pour régler ça tu peux changer le background-size à 100% avec un heigth à ta guise.

Et faire un background-repeat:no-repeat;

Voici un exemple :

Après changer le background-size par rapport à la tailel d'écran grâce aux @media pour avoir un truc bien responsive

Par contre je te conseillerais ce tuto pour créer des images adaptatif, car à un certain niveau l'image s'entasse et perd toute sa qualité, c'est pas beau à voir : https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web

Je rajoute également, de ne pas utiliser plusieurs fichier css, rassemble tout ton css dans un seul fichier, sinon trop de requêtes et baisse de performances. Et aussi utilise le cdn de fontawesome pas besoin d'alourdir ton serveur

-
Edité par Mehddii 21 janvier 2020 à 16:45:45