28172 sujets

CSS et mise en forme, CSS3

[Résolu] Deux images en fond sur le body et min-height + sticky footer

Hello,

Je cherche à procéder autrement pour mettre deux images en fond de page sur mon body avec autre chose que le min-height que j'ai mis pour que les images (jointives) s'affichent sur toute la hauteur de ma page.

Voici mon code :
body {
background-attachment: scroll;
background-clip: border-box;
background-color: #fff;
background-image: url("chaton.jpg"), url("chaton2.jpg");
background-origin: padding-box;
background-position: center bottom, 0 34px;
background-repeat: repeat-x, repeat-x;
background-size: auto auto;
min-height: 650px;
}

La solution marche bien, mais comme je désire rajouter un sticky footer, si la page a un min-height (et un contenu court) le footer remonte.

Merci de votre aide.
Modifié par myself (01 Feb 2016 - 18:40)
Voici mon code de la page entière :
<!doctype html>
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
}
/* Je suis obligée de commenter ça sinon les images ne sont pas jointives. Mais j'en aurais besoin pour le sticky. Problème… */
/*html, body {
  height: 100%;
}*/

body {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #fff;
    background-image: url("http://pix.toile-libre.org/upload/original/1454343128.jpg"), url("http://pix.toile-libre.org/upload/original/1454343081.jpg");
    background-origin: padding-box;
    background-position: center bottom, 0 34px;
    background-repeat: repeat-x, repeat-x;
    background-size: auto auto;
    min-height: 1192px; /* Pour que les images soient jointives (niveau dégradé) */
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -230px;
}
.page-wrap:after {
  content: "";
  display: block;
}
#section-footer, .page-wrap:after {
  height: 230px;
}
#section-footer {
  background: orange;
  background: rgba(250,0,0,0.5);
}
</style>
</head>

<body>
<div class="page-wrap">contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu </div>
<footer id="section-footer">footer footer footer footer footer footer footer footer footer footer footer (que je voudrais en sticky)</footer> 
</body>
</html>


La source du sticky est ici : https://css-tricks.com/snippets/css/sticky-footer/

--------> http://codepen.io/anon/pen/PZBPxa
Modifié par myself (01 Feb 2016 - 17:49)
Bon j'ai supprimé le min-height du body qui me posait problème et j'ai mis un script jQuery pour le sticky footer.
Sujet clos
Aller à