18041 sujets

Questions générales et questions de débutants

[Résolu] Probleme Background-image

Bonjour tout le monde,

Je viens de debuter dans le css donc soyer indulgent merci Smiley confused .

Voilà mon probleme, je voudrai mettre une image de fond dans une de mes div, donc j'utilise background-image, seulement l'image ne s'affiche pas.

Je me dit alors il y a peut etre un conflit avec mon code je crée un nouveau css et ajout seulement mon background-image mais rien ne se passe Smiley bawling . Alors je fouille un peu et je lit qu'il faut obligatoirement indiquer une hauteur. Donc je le rajoute mais marche toujours pas.

Après je me dit bon c'est mon image qui bug, donc je le met en dur dans la balise body du html comme cela <body background="images/fondgeneral.gif"> et miracle cela marche mais impossible de le remettre dans une balise.

J'ai tout essayé car l'image et une image de 350px de hauteur et de 1px de largeur c'est pour faire un degrader. au niveau du css c'est bien cela qu'il faut mettre non ?


div#conteneur{
	background-image: url(images/fondgeneral.gif);
	background-repeat: repeat-x;
	background-color: #FFFFFF;
}


Merci de votre aide.
Modifié par Halindel (10 Jul 2007 - 11:02)
Salut !

Ton div a-t-il du contenu dans ta page HTML ?
Si ce n'est pas le cas, c'est normal que tu ne vois pas l'image, car ton div est vide et qu'il n'a pas de taille par défaut.
Oui ma div est contenu dans ma page html je vous mes le code pour le html


	
<div id="conteneur">
	<!--Affichage des Articles-->
	<div id="article" class="block">
		<p class="sstitre"><img src="./images/farticle.gif" title="fleche" alt="fleche"/> Article</p>
		<p><img src="./images/article.jpg" title="article" alt="article"/></p>
		<div class="unarticle">
			<div class="msstitre">
				<img src="./images/pfarticle.gif" title="fleche" alt="fleche"/>
				Lorem Ipsum is simply dummy text of the printing
			</div>
			<div class="resumearticle">
				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
			</div>
			<div class="savoirplus">
				<a href="">
					<img src="./images/savoirplus.gif" title="fleche" alt="fleche"/>
					En savoir plus
				</a>
			</div>
		</div>
	</div>
					
	<!-- Articles pour les professionnels-->
	<div id="professionnel" class="block">	
		<p class="sstitre"><img src="./images/fprofessionnel.gif" title="fleche" alt="fleche" /> Professionnels</p>
		<p><img src="./images/professionel.jpg" title="professionel" alt="professionel" /><p>
		<div class="unarticleprof">
			<div class="msstitre">
				<img src="./images/pfprofessionnel.gif" title="fleche" alt="fleche" />
				Lorem Ipsum is simply dummy text of the printing
				</div>
				<div class="resumearticle">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
				</div>
				<div class="savoirplus">
					<a href="">
						<img src="./images/savoirplus.gif" title="fleche" alt="fleche" />
						En savoir plus
						</a>
				</div>	
			</div>
		</div>
					
	<!-- Parti Actualités -->
	<div id="actualite" class="block">
		<p class="sstitre"><img src="./images/factu.gif" title="fleche" alt="fleche" /> Article</p>
		<hr/>
		<a href="" class="savoirplus">
			<img src="./images/savoirplus.gif" title="fleche" alt="fleche" />
			Tout l'actualité
		</a>
		<a href="" class="savoirplus">
			<img src="./images/savoirplus.gif" title="fleche" alt="fleche" />
			Agenda
		</a>
		<hr/>
		<div class="unarticle">
			<div class="msstitre">
				<img src="./images/pfarticle.gif" title="fleche" alt="fleche" />
				Lorem Ipsum is simply dummy text of the printing
			</div>
			<div class="resumearticle">
				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
			</div>
			<div class="savoirplus">
				<a href="">
					<img src="./images/savoirplus.gif" title="fleche" alt="fleche" />
					En savoir plus
				</a>
			</div>	
		</div>
	</div>
</div>


En sachant que tout cela se passe dans le html et body d'une largeur de 800px. Certain div comme celle de l'article sera utiliser plus tard pour la mise en forme des news avec php.

edit : desoler pour les tabulations, mais c'est aligner dans mon code je modifie cela.
Modifié par Halindel (10 Jul 2007 - 08:48)
Tu as vérifié que le chemin vers l'image est bon?

Pour rappel, le chemin indiqué dans une feuille de style doit être celui depuis la feuille de style, et non pas depuis la page.

Deux carambars et un roudoudou que c'est ça. Smiley cligne
Halindel a écrit :
Alors je fouille un peu et je lit qu'il faut obligatoirement indiquer une hauteur.

Non. Si tu bloc n'a pas de hauteur, pas de hauteur minimale et pas de contenu, il faut 0px de haut, donc forcément on ne voit pas l'image de fond. Si par contre tu as un contenu, tu n'as pas besoin de fixer une hauteur (et il est préférable de ne pas le faire).

Halindel a écrit :
Après je me dit bon c'est mon image qui bug, donc je le met en dur dans la balise body du html comme cela <body background="images/fondgeneral.gif">

On oublie ça tout de suite, on ne s'en portera que mieux. Smiley cligne

Halindel a écrit :
J'ai tout essayé car l'image et une image de 350px de hauteur et de 1px de largeur c'est pour faire un degrader. au niveau du css c'est bien cela qu'il faut mettre non ?

Oui, le code CSS est correct (reste à vérifier le chemin vers l'image).
Au passage: il est préférable d'avoir une image de plusieurs pixels de large (10 ou 20 par exemple). Certains navigateurs ont, dans certaines conditions, du mal à répéter mille fois une même image. Avec une image de 20px de large, tu diminues le nombre de répétitions nécessaires par 20.

Pour finir: si tu n'y arrives toujours pas, le mieux serait que l'on puisse constater le problème directement. Donc si tu as une page en ligne, ça aide. Smiley cligne
Smiley bawling Smiley bawling

Elle est ou la corde ??

moi qui d'habitude met toujours le css a la racine pourquoi cette fois je l'ai mit dans un dossier spécifique :'(

*Halindel donne ca recompence à Florent *

Et dire que hier je me suis prit la tete dessus pendant 2h Smiley fache

Par contre un autre probleme est survenu Smiley sweatdrop avec l'affiche d'ie6 c'est nickel mais avec FF marche pas, met cadre ne se trouve plus dans ma div conteneur je ne sais pas pourquoi. Et cela depuis que j'ai ajouter left a ses cadres afin de les mettres sur la meme ligne.

code css des blocks

/*CSS: Conteneur regroupant les différentes parties. pour degrader en bas*/
div#conteneur{
	background-image: url(../images/fondgeneral.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	height: 100%;
	background-color: #FFFFFF;
}

.block{
	float:left;
	margin-left: 10px;
}

/*CSS: niveau article page Accueil*/
div#article {
	color: rgb(0,127,70);
	width: 270px;
	font-size: 12px;
	/*float: left;*/
}

/*CSS: niveau professionnel page Accueil*/
div#professionnel {
	color: #553B16;
	/*margin-left: 290px;*/
	width: 270px;
	font-size: 12px;
	/*float: left;*/
}

/*CSS: niveau actualité page Accueil*/
div#actualite {
	color: #CE3402;
	/*margin-left: 600px;*/
	width: 185px;
	font-size: 12px;
	/*float: left;*/
}
hr{
height: 1px;
margin: 0;
padding: 0;
color: #CE3402;
background-color: #CE3402;
border: 0;
}
/*CSS: niveau sous titre */
div.sstitre {
	font-size: 24px;
	font-weight: bolder;
}

/*CSS: niveau sous titre news */
div.msstitre {
	font-weight: bold;
}
.savoirplus A:hover,A:link,A:visited {
	color: #FB6904;
}


Edit: vu que tu as reposter entre temps, le body background etait pour tester mon image surtout Smiley cligne . Et d'accord pour augmenter la largeur du fond pour etre sur que cela marche.

Edit 2 : tellement a me morfonde que j'ai oublier de te remerci convenablement Smiley cligne

Tu es mon sauver, mon heros je te doit la vie Smiley confused
Modifié par Halindel (10 Jul 2007 - 10:08)
Sujet clos
Aller à