28172 sujets

CSS et mise en forme, CSS3

Double Background qui se répète sur toute la hauteur de la page

Bonjour Smiley smile

J'essaie de faire un site avec un "double background", une image sur le <html> et une autre image sur le <body>.
<html> contient une image unique en "no-repeat" et s'adapte à la taille de l'écran
<body> contient une image unique en "repeat"

Ca marche plutôt bien sur une page pas trop grande mais lorsque celle-ci est plus grande que la hauteur de l'écran, le background du <body> ne se répète pas jusqu'en bas (en fait la répétition de l'image s'arrête à la hauteur de l'écran).

Voici l'exemple d'une grande page où le problème se produit

Que dois-je faire pour que le background du <body> s'adapte à toutes les hauteurs de l'écran ?

Merci et bonnes fêtes à tous !
Modifié par cevichero (26 Jan 2012 - 22:01)
EN général on dit pas de nouvelles bonnes nouvelles....
Mais là je voudrais bien avoir quelques nouvelles svp Smiley cligne
Merci et bonnes fêtes !
Bonjour,

Le problème viens du height à 100% de HTML (qui prend comme 100% la taille du viewport).

Vue que le fond sur body couvre toute la zone couverte par le fond sur HTML, pourquoi ne pas "fusionner" les deux images ?




ps. : c'est un peux la semaine entre nowel et jour de l'an ; il parait que les gens sont en vacances.
Modifié par Laurie-Anne (30 Dec 2011 - 19:20)
Bonjour Laurie-Anne,

Oui j'avais pensé à la "fusion" des deux images, mais le problème est que l(image du fond-fond doit se redimensionner selon la taille de l'écran et sur les grandes résolutions l'effet "écran cathodique télé" ne se verrait plus...
De plus, je pense que c'est possible mais je ne sais pas comment... Donc, si toi ou quelqu'un d'autre a une idée, je suis preneur ! Smiley smile

Sur ce, bon réveillon à tous ^^
Hello Smiley smile

Bonne année à tous !
Je relance mon sujet avant qu'il ne tombe dans les oubliettes ^^

Peut-être faut-il utiliser du javascript ? je me le demande...
Merci
Salut Gili,

Le problème est que je ne veux pas que l'image se redimensionne en fonction de l'écran (je l'utilise déjà), mais plutôt qu'elle se répète même si la page est plus grande que l'écran.

Pour rappel :
<html> contient une image unique en "no-repeat" et s'adapte à la taille de l'écran
<body> contient une image unique en "repeat"

C'est l'image du body (2px sur 2px) que je veux faire dupliquer quelque soit la hauteur de la page.

Ma question est
Est-ce possible en CSS ? J'ai beau chercher, je ne trouve / n'y arrive pas.
Il paraitrait que le Javascript permet de faire ça...

merci
Sur ton exemple il faut que tu positionnes autrement ton div#contenu qu'en position absolute.

En plus de ça il faut retirer le height: 100% dans cette propriété :

html, body {
    color: #222222;
    font-family: Tahoma,Arial,Helvetica,sans-serif;
    font-size: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


Et ça fonctionne.
Bonjpur,

Je réponds avec beaucoup de retard car j'étais en plein déménagement !


Gili, j'ai testé ce que tu proposes, et ça fonctionne MAIS seulement avec une page qui dépasse le bas de l'écran. Si le bloc de texte est plus petit, le background s'arrête au même niveau, du coup pas en bas de l'écran...
J'espère que je suis clair dans mes explications ^^

** Si quelqu'un a une idée (CSS ou Javascript), je suis preneur !!
Merci
bonsoir,

sur le fond , l'idée de partager tes deux images de fond sur body et html sont bonnes si tu ne veut pas utilisé les possibilités css de fond multiple.

Pour que body couvre la fenêtre si le contenu ne suffit pas, il faut lui donner une hauteur minimale de 100% de la fenêtre, ce qui va l'autoriser a s’étirer.

la base serait alors:
html {
/* on fixe une hauteur qui servira de référence aux enfant direct: ici body */
height:100%; /* = hauteur de la fenêtre */
/* on élimine les marges */
margin:0;
padding:0;
background:url(image-a-gauche.gif) repeat-x 25% ; /* par exemple*/
}

body {
/* on fixe une hauteur minimale héritant de la hauteur déclaré du parent direct : ici html */
min-height:100%;
/* on élimine les marges */
margin:0;
padding:0;
background:url(image-a-droite.gif) repeat-x 75% ; /* par exemple*/

/* si l'on veut absorber les fusion de marges , on peut tenter  de forcer le navigateur a calculer une marge interne inapplicable */
padding:0.1pt; /* par exemple (sinon traiter les marges des enfants au coup par coup ex: pour h1, p , etc ....) */
}


Une fois la base mise en place et les marges maitrisées , il restera a surveiller les élément flottant et ceux totalement extrait du flux (absolute, fixed).

a mon sens le JavaScript n'est pas nécessaire et il vaut mieux se baser sur un positionnement dans le flux (exit absolute et fixed).

Cordialement,
GC
Bonsoir,

Voici ce que je fais pour avoir deux images :
html {background: #070840 url("../Images/univers.jpg") no-repeat center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

body {
background: #070840 url("../Images/monde.jpg") repeat center fixed;
}

Ce n'est pas toujours très joli, mais si tu as de bonnes images, ça peut faire un très bel effet.

Note : je ne suis pas arrivé à le faire marcher sur IE <= 8.
Modifié par tibibou (21 Jan 2012 - 21:11)
Bonjour !

GC-Nomade :
Merci mais malheureusement ça ne change rien, vois par toi même : exemple
La position fixed pour l'image du fond (la "plus au fond", celle de <html>), est nécessaire sinon, l'image se répète, ce que je veux éviter.
Ou alors j'ai mal fait quelque chose ? Smiley smile

Tibibou :
Merci aussi mais j'ai sais comment superposer deux images, ma question est comment répéter une image sur toute la hauteur de la fenêtre, quelque soit la taille de la page ? (voir le premier post et lien ci-dessus)


* Peut-être qu'en fin de compte le Javascript est nécessaire ? A vrai dire, je ne sais pas de quelle manière mais peut-être... non ?
Modifié par cevichero (26 Jan 2012 - 22:01)
Sujet clos
Aller à