18041 sujets

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

Mettre une image en plein écran

Bonjour,

Je n'arrive pas à mettre une image en plein écran.
J'ai des marges, 7% à droite et à gauche dans le Body du css, donc l'image suit ces marges.
Savez vous comment je peux faire?

Merci pour votre aide.
Modifié par abeille (15 Mar 2016 - 10:59)
Salut,

Tu peux commencer par nous montrer ton code et idéalement reproduire ton cas en ligne : j'affectionne particulièrement Codepen.

Typiquement, il faut que tu indiques à ton body les propriétés suivantes :
body{
  margin: 0;
  padding: 0;
}

Modifié par MatthieuR (15 Mar 2016 - 12:22)
MatthieuR a écrit :
Salut,

Tu peux commencer par nous montrer ton code et idéalement reproduire ton cas en ligne : j'affectionne particulièrement Codepen.

Typiquement, il faut que tu indiques à ton body les propriétés suivantes :
body{
  margin: 0;
  padding: 0;
}
Bonjour Matthieu.
Voici mon Css:
body{ 
margin-left: 7%;
margin-right: 7%;
font-family: tahoma, arial, helvetica, sans-serif;
font-size: 150%;
line-height: 150%;
text-align: justify;
background-color: #f2f2f2;
 }

Pour le Codepen, ça a l'air très bien, mais j'arrive pas à trouver comment on insère une image là dedans.

Merci
Il faudrait plutôt que tu appliques tes marges sur un élément qui enveloppe l'ensemble de ton site à: typiquement une div avec une class .wrapper qui englobe le contenu du site.

Ca donnerai :
body{
  margin: 0;
  padding: 0;
  font-family: tahoma, arial, helvetica, sans-serif;
  font-size: 150%;
  line-height: 150%;
  text-align: justify;
  background-color: #f2f2f2;
  background-image: url('tonimage.jpg'); /*ton image*/
  background-size: cover;
}

.wrapper{
  margin: 0 7%;
}

<body>
  <div class="wrapper">
    <!--le reste de ton site...-->
  </div>
</body>
Excellent Matthieu merci, mais ...petit souci:
l'adresse de l'image est dans le CSS et je voudrais que cette image ne soit que dans la page d'accueil du site.
Les autres pages auront une photo différente.

MErci pour tes explications.
Non, Codepen ne génère pas d'image lui-même mais tu peux, comme te l'explique gcyrillus, insérer des images de l'extérieur hébergées où tu veux...
Le site http://lorempixel.com/ génère des images pour faire des tests.

Sinon, tu peux bien évidemment n'appliquer ton image qu'à une certaine page.
Soit en appliquant le background à une classe ou un id appliqué au body soit via un attribut style en ligne.
Tu peux voir des exemples sur cette page : http://codepen.io/korell/pen/aNBRJL.
Sujet clos
Aller à