Bonjour, je viens de créer un site web mais étant grand débutant dans ce domaine j'ai un problème persistant que je n'arrive pas à régler par moi-même.
 
Voilà, comme vous pouvez vous en rendre compte en naviguant sur le site http://studiohomestaging.fr l'image de fond se répète à droite ce qui est très génant...
 
J'aimerai si possible que l'image de fond ne se répète pas, en gros plus d'image après la barre de menu.
 
J'ai utilisé Kompozer pour la création du site et j'ai juste utilisé la fonction pour mettre une image en fond, pensant que celle-ci ne se répeterai pas.
 
Si vous pouviez m'éclairer pour remédier à ce problème... merci d'avance!

Utiliser l'option "no-repeat".

Bon, merci beaucoup, j'ai réussi à insérer cette commande mais maintenant j'ai un gros cadre blanc comme vous pouvez le voir hihi! Comment je pourrai étendre la partie graphique à tout le site ou alors adapter la fenêtre à la taille de ma page?

Première fois que je vois des valeurs en centimètre dans un site.
Quel est le nom du logiciel qui te produit ce joli code ?

Sinon dans le style de ton body rajoute

background-color:#BBBCBF;

Pourtant j'ai rien précisé en centimètres hehe!    
 
C'est Kompozer comme je l'ai écrit plus haut, je vais essayer ta technique mais de "?" s'affichent dans ton post entre BB,BC et BF...

Ayé, je viens de tester, mais le cadre est toujours là, certes il change de couleur mais il reste là... ça fait moche... y'a pas moyen d'adapter la fenêtre ou de supprimer ce cadre vraiment?

C'est très facile avec des compétences techniques, mais avec un logiciel comme Kompozer sans passer par le code, je suis moins convaincu.
Ton code généré est immonde, beaucoup de changement à faire pour centrer le site.
En gros essaye de mettre un div centré (http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS), et tu rajoute le style que tu donnes actuellement au body
Et au body, tu donnes la couleur grise de ton motif  
 
De toute façon, ton plus gros problème c'est la taille de ton image de fond.
Ton site fait est presque aussi lourd que celui du Monde
Tu dois la réduire à un seul motif, que tu fais répéter

Oué, effectivement ton background est super lourd ! 700Ko même avec une connexion rapide, ça va prendre plusieurs secondes pour s'afficher. Découpe ton image en deux, comme l'a indiqué David Boring. L'entête que tu ne répètes pas et le motif de fond, que tu devrais réduire au strict minimum pour avoir un motif tuilable sur ta page.
 
Centre tout le site et rajoute sans doute une bordure pour éviter les effets de cassure, et tu auras un truc pas trop mal.

ptet que tu mates pas souvent les css de print
 
mais apres je plussoie tout le monde en ajoutant que son en tete ne devrait absolument pas etre placée en fond
elle devrait etre en html dans une balise img voire H1
 
sinon pour la tuile ca devrait passer mais j ai des yeux en carton à 3h du mat

D'accord pour les css print, mais là, il y a des text-indent en centimètre dans le code en ligne !

oh putain j avais pas maté le code

 
les tableaux, les br, les font
avec en bonus position absolute un peu n importe comment et les quatre big imbriqués

 C'est pas ma faute, j'ai tout fait en visuel avec Kompozer... pour ce qui est de l'image elle n'est pas compressée du tout, c'est encore une ébauche ce site donc je teste...
Le fait que le code soit moche ça change quoi pour le gars qui va sur le site sans regarder son code au juste? J'voudrai juste garder le site tel quel sans cette foutue barre sur le côté en fait... si c'est possible...

Avec du "moche code" le site est lent car beaucoup plus lourd.
Sinon, je t'ai donné une solution plus haut.
 

J'ai vraiment du mal à utiliser les codes de ta page David...
Je suppose que c'est ce code là que je dois caser:
<div class="centrage"><img src="…" alt="…" /></div>
 
div.centrage {text-align: center;}
 
Mais je sais pas où ni comment... J'ai fait des essais, l'image s'est donc décalée vers le bas, j'avais par conséquent une grosse marge blanche en haut, en gros au lieu d'en supprimer une ça en a rajouté une héhé!
 
J'ai plein de <div> en plus, je sais pas comment on s'en sort, je dois centrer texte et image...

Bon, j'ai trouvé la technique pour centrer une image sur un site, je le ferai bien pour ce site mais le problème c'est que je ne peux pas écrire mon texte par-dessus l'image... et si je mets l'image en tant qu'image de fond je ne peux pas la centrer... comment est-ce que je peux faire?

Hmmm, la balise img ce n'est pas fait pour mettre un truc en fond d'écran. Tu as la propriété CSS background-image pour ça.
 
Si tu veut centrer, sans répétition, un truc du genre devrait faire l'affaire :
 

Je vais essayer de comprendre de façon très détaillée parceque je suis un petit débutant:
 
dans mon code html je dois créer un <div> qui doit comporter un ID? comment je fais ça? et je mets quoi au juste dans ce div?
ensuite dans le fichier CSS associé à cette page je dois écrire:
 #idDeMonDiv
{background: transparent url(url/de/mon/image.jpg) no-repeat 50% 50%;}
 
avec ça j'aurai mon fond d'écran centré et non répété?

en fait une div, c'est un bloc.  
 
Et son id c'est tout simplement l'ensemble des propriétés qui vont avoir un impact sur ton bloc.  
 
par: <div id="conteneur"></div>
 
 
et dans la css:  
 
#conteneur{
width:500px;
height:500px;
background-color:#000000;
}
 
ce qui donne un bloc noir de 500px de côté.

Okay! merci pour ces précisions! Alors par exemple, est-ce que je pourrai faire en sorte de faire rentrer mon site dans un div auquel j'attribuerai les propriétés qui me permettront de le centrer par rapport à la page?

Oui, c'est pas trop compliqué.  
 
Tu crées une div qui va contenir l'ensemble des autres éléments.  
tu lui donne l'id (global par ex.)
 
Et comme propriétés:
 
#global{
width:800px; a titre d'exemple
margin-left:auto;
margin-right:auto;
}
 
margin-left et margin right calculent la marge à gauche et à droite pour centrer ton site. Comme ça, le site reste centré sous toutes les résolutions.

voila les deux images optimisées tu passes de 700ko a 30
 


 
je me suis amusé a recoder la page d intro
tu verras qu en plus d avoir un code plus léger il est aussi plus malléable: si tu veux changer quoique ce soit tu modifies juste les css et tu ne devrais plus avoir a retoucher le html
c est fait vite donc il y aura peut etre un bug ou deux sur ie6 mais en principe non (la taille des cases du menu risque d etre un peu chiante, tu peux mettre des tailles en px - meme si j aime pas beaucoup - vu que ton image d en tete signifie surement que tu veux un site bloqué en 1024px de largeur)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Studio Home Staging</title>
<style>
* {margin:0;padding:0}
body {background:url(fond.png);text-align:center;font-weight:bold;font-style:italic;}
ul {margin:0 auto;border:4px outset black;width:98%;overflow:auto;list-style-type:none;zoom:1;}
li {background:#990000;float:left;width:23.3%;margin:2px;border:1px inset black;height:70px;line-height:70px;vertical-align:middle;padding:0 5px;}
li.double {line-height:32px;}
li a {color:#A0A0A0;text-decoration:none;font-size:150%;}
li a:hover {text-decoration:none;color:CCCCCC;}
#main {width:75%;margin:50px auto 0;text-align:left;font-size:100%;color:#5E5E5E;}
p {margin-bottom:20px;}
.firstLetter {color:#990000;font-size:150%;}
.big {font-size:300%;}
</style>
</head>
<body>
<img src="bandeau.jpg" alt="logo" />

<ul>
    <li><a href="">Accueil</a></li>
    <li class="double"><a href="">Le Home Staging</a></li>
    <li><a href="">Nos Tarifs</a></li>
    <li><a href="">Contacts</a></li>
</ul>

<div id="main">
    <p><span class="firstLetter big">Q</span>uelles qu'en soient les raisons , vous avez  
    décidé de mettre en vente votre maison ou votre appartement. Le but de tout  
    vendeur est d'obtenir le meilleur prix dans les plus brefs délais.</p>
    <p><span class="firstLetter">U</span>ne fois cette décision prise le plus dur reste  
    à faire : vous soumettre au défilé des visiteurs acheteurs potentiels et endurer les  
    critiques qu'ils ne manqueront pas de faire pour justifier une négociation à la  
    baisse du prix demandé.</p>
    <p><span class="firstLetter">D</span>e votre côté ce bien n'est plus totalement le  
    votre, vous êtes en pleine recherche de votre prochain nid ou mieux encore,  
    celui-ci est déjà trouvé et vous ne rêvez que de votre imminente installation.</p>
    <p><span class="firstLetter">D</span>e façon inconsciente vous vous  
    désintéressez de votre bien en vente, laissez le ménage, le rangement et  
    l'harmonie ambiante partir à vau l'eau. L'avenir ailleurs est prioritaire et c'est tout  
    à fait compréhensible.</p>
    <p><span class="firstLetter">D</span>ans l'absolu, les acheteurs, eux, recherchent  
    la maison de leurs rêves et se voient déjà y installer leurs meubles et objets  
    personnels. Ils ne verront pas votre maison telle que vous la voyez vous-même!</p>
    <p><span class="firstLetter">L</span>e manque de soin, l'encombrement, le  
    désordre et le manque de lumière seront les seules impressions qu'ils garderont  
    en mémoire de leur visite et quand on sait qu'un achat se joue dans les deux  
    premières minutes, autant dire que la marge d'erreur est très limitée : le premier  
    coup d'oeil sera primordial pour l'issue de la vente.</p>
</div>
</body></html>

Ouaaahhh! Merci beaucoup! j'ai remplacé les adresses des images et tout marche bien! Juste un petit truc pour "le home staging" il est un peu plus haut que les autres éléments du menu, je vois que le code est un peu différent avec:

 <li class="double"><a href="">Le Home
Staging</a></li>

Il subit un traitement spécial parce que un peu plus long?

Pour les autres pages je vais essayer de les modifier en prenant ton code comme base et je vous soumettrez ce que j'obtiens! Merci beaucoup en tout cas!

Je peux te suggérer un passage par la section webdesign?  
 
Histoire de te filer des petits conseils pour rendre ton site un peu plus agréable.  

j'irai y faire un tour oui! une fois que j'aurai perfectionné ma maitrise un peu!
à propos, je voulais savoir, je vais refaire également les 3 autres pages du site, sauf que sur ces pages je vais pas avoir de motif qui se répète mais une vraie grande image, comment je vais faire, parceque là en gros la petite image se répète à l'infini... moi je vais avoir une image de 1000px/1000px en gros donc je vais faire comment pour ne l'avoir qu'une fois et centrée?

 
C'est quand même mieux d'avoir une petite image qui se répète que d'avoir une grosse image parce que c'est quand même plus rapide à télécharger et moins source de problèmes liés à la taille de l'écran  

bah je sais bien mais je décide pas de tout sur ce site... les images sont jolies je trouve, ça serait dommage de refaire la même chose que la première page...

 
ouaip c ets pas tres élégant comme méthode mais c est le mieux à faire
par contre t as oublié la classe double
 

i second that
 
bah y a que la page home staging où le fond ne se repete pas et le rendu est plutot laid

Il se passe un truc bizarre quand on clique sur accueil plusieurs fois de suite, on pas l'impression d'être sur la même page

Vous pensez que je devrai isoler par exemple la main en la détourant pour la rajouter par-dessus le fond qui serait toujours le même? C'est une idée... Mais pour le miroir et la tablette ça va être plus compliqué à détourer non?la taille des motifs est pas la même en plus je crois...

 
   
C'est quoi ton navigateur/résolution d'écran ?

FF en 1680*1050
 
 
Mais ça semble être régler là.  
 

Me revoilà! Bon, j'ai fait les modifs pour la page 2, ça a l'air assez correct m'enfin je suis pas un pro hein !
 
J'aurai besoin de conseils pour le fond des Pages 3 et 4 car il faudrait conserver les objets déco sur la 3 et la main sur la 4, je sais pas trop comment m'en sortir parce que jusque là c'est des images qui se répètent...
 
Merci d'avance!

Au risque d'être désagréable je crois t'es parti sur une bien mauvaise base avec ton site.  
 
Je crois comprendre que tu débutes alors on va être indulgent.  
 
Mais pour être clair, tu devrais recommencer de zéro.  
 
Pour ton site, il est quand même recommandé que tes pages soient identiques.  
C'est-à-dire, même haut de page, même background, même footer.  
 
Le contenu, c'est la seule chose qui va changer d'une page à l'autre.  
 
Donc, le plus simple, c'est de faire un template avec tous les composants de la page sauf le contenu.  
Après tu n'auras plus qu'à rajouter le contenu au template en fonction des pages pour t'assurer d'avoir des pages qui se ressemblent.  
 
Pour les objets déco, ils font partie du contenu.  
 
 
 
 
 

Mais je ne fais pas ce que je veux sur ce site malheureusement! Comment je pourrai intégrer les élément de déco à mon background? faut que je le détoure? gosh!

Détourer?  
 
Si ils sont sur un fond, alors oui.  
 
Mais tu ne dois pas les intégrer à ton background.  
Ton background, c'est uniquement le motif qui se répète. L'image fait partie du contenu.  
 
Mais sérieusement, essaie de reprendre de zéro. Avec un site bien centré, un menu bien ajusté, tu y verras plus clair.  

oui bah au départ c'est une image est le papier peint est d'origine donc faut détourer... j'ai compris, faut que je le rajoute par-dessus le background en fait... mais sur les deux premieres pages le site est pas bien centré et le menu non plus?

Essaie de faire un template correct avec un code propre.
 
Après tu n'auras qu'à rajouter quelques div, y mettre le contenu et ton site est fini.
 
Utilise un seul type de background (une couleur unique ou un motif de petite taille).
La couleur du texte doit être contrastée par rapport au fond, sinon c'est illisible.
 

le code n'est pas encore propre pour les deux premières pages? Comment je le crée au juste ce template? je vide tout le contenu propre à la première page par exemple et ça me sert de template?

Ben tu crées une page en laissant l'espace pour le contenu. Tu sauvegardes sous template.html
 
Ensuite tu intègres ton contenu et tu sauvegardes normalement.
 
Un template, c'est un modèle. Si ça peut t'aider à y voir plus clair.

Bon, j'ai fait l'ensemble des 4 pages du site sous le même modèle, mais sur mes 2 dernières pages je ne sais toujours pas comment faire pour insérer ma main ou mon miroir et autres élément de déco...