Empiler des Backgrounds

martin-f
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'aimerais empiler deux backgrounds (une couleur en arrière plan et une photo devant), ce qui est normalement possible avec CSS 3. Cependant ce n'est pas si simple, je voudrais que la photo occupe tout l'espace de la page et n'apparaisse qu'une seule fois. Je m'explique, je veux qu'en scrollant la page, la photo "monte" pour être remplacer par le background-color.

j'ai trouvé un exemple représentant presque ce que je veux : http://www.betatakaki.com/

(Hors même en inspectant cette page je ne comprends pas le méthode utilisée)

Seule différence, je voudrais que ma photo prenne toute la hauteur de la page de "départ".
On arrive alors à la seconde question, est-il possible de faire en sorte que l'image prenne exactement toute la page de "départ" sans dépasser (et sans déformer l'image évidemment) ou doit-on faire cette transformation manuellement?
je vois comment récupérer la largeure de la page mais pas la hauteur.

Voici mon code actuel,

body {
    background-color: #1c554e;
    background: url(images/2.jpg) no-repeat fixed;
    background-size: cover;
}

Je vous remercie infiniment pour le temps que vous m'accorderez!

*page de "départ" = première partie de la page visible avant de scroller

5 réponses

martin-f
Auteur
Réponse acceptée

Magnifique c'est exactement ce que je voulais, (il me reste encore à supprimer les marges créées mais ça devrait pas être le plus dur.
J'ai juste modifié ton code par :

#div1{
    margin : 0px;
  background-image: url("images/2.jpg");
  background-size: cover;
}
#div2{
    padding : 0px;
background-color: #1c554e;
}

Pour que l'image ne soit pas coupée mais prenne toute la page.

il reste encore le problème de la hauteur relative du premier <div> mais je vais demander sur un autre post car cela n'a pas de rapport avec les titres.
Encore Merci.

ayoub abouhilal 
<!DOCTYPE html>
<html>
<head><style>
#div1{
  background-image: url("img.png");
  width: 100%
}
#div2{
background-color: #1c554e;
}
</style>
</head>
<body>
<div id="div1"><!-- page depart -->

</div>
<div id="div2"><!-- autre partie de votre page -->
    </div>
</body>
</html>

utilise des div pour diviser ta page correctement

martin-f
Auteur

Pardon je n'avais pas compris l'utilité de ton width : 100% (pourtant évidente)
Cela ne marche pas car le div prend toujours la taille de son contenu.
Je vais essayer de me renseigner avant de recréer un post.

martin-f
Auteur

ok j'ai compris il fallait premièrement mettre :

html, body {
    margin:0;
    padding: 0;
}

pour les marges des cotés et un peu en haut et en bas
puis mettre un margin = 0; sur le contenu du div (qui était un <p> pour l'exemple)

Paula1232

Je vais essayer de me renseigner avant de recréer un post bluestacks.
Cela ne marche pas car le div prend toujours la taille de son contenu.