Annonce

**-Nicolas-** · 30 avril 2011, 19h33

Je ne suis pas sur d'avoir vraiment compris ce que tu cherche à faire, je n'ai pas non plus regardé le code html et css du site mais par expérience, dans ce type de sites, l'html est souvent structuré avec des div

Par exemple un div pour l'entête, un pour le corps, un pour le pied de page qui peuvent eux aussi contenir différents div. Et donc, il te suffit de mettre un background dans le div de l'entête, un dans le pied de page, ... un peu ou tu veux.

Et donc le background, tu ne le met pas dans le body mais dans ta structure.

Si ce n'est pas ça, fait un petit dessin avec des flèches pour que je comprenne

**MrBean** · 30 avril 2011, 20h29

Ouai si je me fie au site que tu nous montres. Tu mets trois div avec width 100% et tu ajuste la hauteur selon tes besoins... C'est pas vraiment 2 background ce qu'on voit là. En fait peu importe comment tu structures tes sites (css absolu ou pas, div,même avec des tables ! haha) c'est certain que tu peux faire des zones comme ça et définir un background pour chacune. En gros c'est trois boîtes l'une au dessus de l'autre, la première a une hauteur fixe, la seconde non et la dernière oui.

Edit: À la limite c'est encore plus simple tu fais ton site de haut en bas et tu crées un div pour le header avec le bg que tu veux, puis ton contenu central, puis un div pour le footer avec le bg que tu veux. Utilise le width 100% pour avoir l'effet bg que je crois que tu vois.

**Zapier** · 30 avril 2011, 20h35

J'ai toujours mis mes Background avec du CSS

body {
background-image: url(background.jpg);
background-position: top center;
background-repeat: no-repeat;
}

Pour être plus claire. J'utilise lorsque je fais des sites un unique background (code ci-dessus) et je fais ma structure site par dessus. Mais du coup, je ne peux pas efficacement réaliser la partie bas du site comme le font l'ensemble des Webdesigners. Je cherche donc le moyen (En CSS) d'afficher un second Background en partie basse, mais qui s’aligne sur la fin du contenue (text, tableau, ...).

**MrBean** · 30 avril 2011, 20h37

Oui c'est comme je t'ai dit. Si tu fais un div avec width 100% et height disons 200 à la fin de ta page. Tu luis mets un background en css et le tour est joué.

**MrBean** · 30 avril 2011, 20h40

Voilà je t'ai fait un exemple, y'a rien de plus clair mon ami : http://pinchoflove.info/ex.html

J'avais oublié de préciser que le document ne doit pas avoir de padding. Regarde le code qui est très très simple et tu vas comprendre ce que je t'explique tout croche à l'arrache ! ^^

Edit:

Code HTML:

<html>
<body style="margin:0px;padding:0px;">
<br/><br/>
<div style="width:100%;height:200px;background: blue;">header</div>
<br/>a<br/>
b<br/>
c<br/>
<br/>hop<br/>
<div style="width:100%;height:200px;background: red;">footer</div>
</body>
</html>

**Zapier** · 30 avril 2011, 20h42

Je vois vraiment pas comment coder ça. Je sais reprendre des code déja fait, mais pas les créer moi même. Tu peux m'aider sur exemple image1.jpg et image2.jpg?

Par exemple créer une barre "image2.jpg" en bas de mon site: http://zapier.free.fr/graphisme/index.html

**MrBean** · 30 avril 2011, 20h45

J'crois que tu as loupé l'exemple que j'ai posté juste avant (on écrit vite!), regarde-le et dit moi si tu comprends toujours pas.

(http://pinchoflove.info/ex.html)

**-Nicolas-** · 30 avril 2011, 21h21

zapette, reprend chaque tr de ta page et ajoute lui une class différente, puis dans ton css tu ajoute un background à t'es tr, un backgdround pour le tr class machin, un différent pour le tr class bidule et encore un autre pour le tr class bazar.

Je vois aussi qu'il y a plein de div (qui au passage ne servent à rien pour ce que j'en ai vu) tu peux remplacer tr par div dans ce que je viens de dire.

Et voila tu as compris le principe après faut l'adapter à ta page et à ce que tu veux faire.

**Zapier** · 01 mai 2011, 11h56

Oui je vois ou vous voulez en venir, mais je ne vois pas trop comment l'utiliser avec des images.

j'ai trouvé exactement le même exemple sur ce site: http://www.terrasse-concept.com/

Le Background haut: http://www.terrasse-concept.com/wp-c...es/main_bg.jpg

Le Background bas :http://www.terrasse-concept.com/wp-c.../footer_bg.png

Le Css est ici: http://www.terrasse-concept.com/wp-c...s/TC/style.css

**Shadowritter** · 12 mai 2011, 17h29

T'en es où finalement ?

T'as pas tout simplement une page de test qu'on puisse te trouver ça

**Zapier** · 05 octobre 2011, 12h31

Pour info, j'ai trouvé (enfin) exactement ce qu'il me fallait ici:

La Ferme du Web - Votre veille technologique quotidienne

http://www.lafermeduweb.net/tutorial/mise-en-place-du-site-en-html-css-p21.html#51

Retrouvez chaque jour le meilleur des veilles technologiques. Partage de ressources, tutos, méthodos, tous les sujets tendances sont sur la Ferme du Web !

En fait, maintenant que je sais, il fallait simplement créer des conteneurs aux bonnes dimensions et y insérer les images (background).

**ChemicalStöf** · 05 octobre 2011, 12h39

ouaip c'est ce que nicolas et MrBean avaient dit

mais c'était pas forcément évident à comprendre sans une connaissance HTML/CSS préalable

**Zapier** · 05 octobre 2011, 12h49

Effectivement.

Ce tuto m'en a en tout cas appris beaucoup. Très utile pour la suite.

**MrBean** · 05 octobre 2011, 19h28

Tant mieux l'ami.

Annonce

CSS- Code pour double Background ???

CSS- Code pour double Background ???

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire