28172 sujets

CSS et mise en forme, CSS3

[Résolu] Background image invisible

Tout d'abord, et en guise de préambule, je tiens à souhaiter le bonjour/bonsoir aux membres de ce forum qui me liront. Mon inscription est encore "fraîche" et c'est mon premier message en ces lieux.

Mon problème semblera caractéristique du béotien pour certains mais j'assume cet état : le positionnement en CSS m'est encore obscur.

Voici la problématique : je cherche à insérer une "background-image" à l'intérieur d'un élément h1 converti en bloc. Malgré de nombreuses tentatives, l'image demeure invisible. Son appel reste infructueux. Afin d'éclairer la situation, voici le code html :

<body>
	<div id="global">
		<div id="entete">
			<h1><a href="#">Lorem ipsum</a></h1>
		</div>
	</div>
</body>


Et voici la CSS attenante :

@charset "UTF-8";

body {
background: #333;
font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
font-size: .8em;
line-height: 1.25;}

html {font-size: 100%;}

html, body {
height: 100%;}

body {
padding: 0;
margin: 0;
padding: 0px 20px;}

#global {
min-height: 100%;
width: 750px;
overflow: hidden;
margin-left: auto;
margin-right: auto;}

#entete {
background-color:#333;
padding: 15px 20px 10px 0px;
height: 140px;}

#entete h1 {
display:block;
float:left;
width:200px;
height:100px;
background: url(images/Logo.gif) no-repeat 0 0;
text-indent:-10000px;
margin: 0 0 0 20;
background-color:#FFFFFF;
color:#FFF;}

#entete h1 a {
display:block;
width:100%;
height:100%;}

h1 {font-size: 3em; text-align:center;}


Je précise que lorsque je fais appel à l'image de manière basique (à l'intérieur de balises <img> à la suite de la balise h1) cela fonctionne.
Si vous m'avez lu jusqu'ici et que vous avez détecté le hic... ou tout simplement des suggestions, n'hésitez pas.

Merci par avance.
Cordialement,
Arko82
Modifié par Arko82 (22 Oct 2009 - 15:57)
Salut,

Es-tu sûr du chemin où se trouve ton image ?
De ce que je vois, elle se situe dans un sous répertoire du répertoire ou se trouve la page css, est-elle bien là ?
Le chemin doit être donné par rapport à la feuille de style et non la page html, et ne sera identique que si la feuille de style et la page html sont dans le même répertoire.

Si ce n'est pas ça, vérifie peut être les majuscules, ou l'extension de ton fichier. Smiley cligne
Salut, je suis moi aussi nouveau sur ce forum.
Mais ton code me parait bon.
Le seul truc qui me parait étrange c'est le text-indent de 10000px ??

Sinon je viens de tester ceci et ca marche parfaitement:

<h1><a href="#">LIEN</a></h1>

h1{
display:block;
width:100px; 
height:100px; 
background: url(casp.jpg) no-repeat 0 0; 
}
Ah ben oui, j'avais pas fait attention à ce détail.

Si tu déplace ton <h1> de 10000 pixels, effectivement il est plus dans l'écran, donc tout ce qu'il contient aussi. Si tu veux que le texte soit masqués au profit d'une image il te faut utiliser quelque chose dans ce genre :


<h1><span>Le titre</span></h1>

et

h1 span {position absolute; top: -5000px, left: -5000px; background: url(image.jpeg) no-repeat 0 0 ;}


Mais vu que ton image est alors porteuse de contenu, autant qu'elle soit dans le contenu html :


<h1><img src="image.jpeg" alt"Le titre tel qu'il apparait dans l'image" /></h1>
Dans la propriété background, tu dois mettre l'url relative à ta CSS... Normalement ton code devrait fonctionner. Smiley rolleyes

La propriété text-indent va déplacer le contenu du h1, pas le background (qui devrait donc s'afficher). Smiley cligne
Merci à tous pour vos contributions !

"Mikachu" a écrit :
Si tu déplace ton <h1> de 10000 pixels, effectivement il est plus dans l'écran, donc tout ce qu'il contient aussi.


Je pense (mais me trompe peut-être) que le "text-indent: -10000px;" n'a d'incidence que sur le texte du h1 et non sur le background. D'ailleurs, si je supprime cette mention de ma CSS le texte apparaît dans sa "boîte" mais l'image demeure absente.
Par ailleurs, les 2 autres techniques de "background-image text replacement" proposées obligent à :
- soit rajouter un <span>
- soit à placer le texte dans le alt d'une balise image ce qui annule, je pense, tout le bénéfice et la raison d'être du h1

"Mikachu" a écrit :
le chemin doit être donné par rapport à la feuille de style et non la page html, et ne sera identique que si la feuille de style et la page html sont dans le même répertoire.

Voici comment s'articule mon dossier :

http://nsa10.casimages.com/img/2009/10/22/091022023832803419.jpg

Le problème vient peut-être de là alors. Comment dois-je procéder ?


"Casp" a écrit :
Le seul truc qui me parait étrange c'est le text-indent de 10000px ??

Le text-indent de -10000 px est ici pour me permettre de substituer l'image au texte. A la place de lettres en typographies web (donc forcément limitées et exclusives) je désire placer une image travaillée sous Photoshop et laissant apparaître du texte en pixel. Garder le texte dans le html me semble préférable pour l'accessibilité.
Par ailleurs, je viens d'essayer ta recommandation mais le problème persiste.


"Laurie-Anne" a écrit :
20 quoi ? pommes ?

J'ai simplifié pas mal le html et la css pour tenter de bien cerner le problème. Le "margin: 0 0 0 20px;" n'a donc plus réellement d'utilité ici effectivement mais il prend tout son sens lorsque je réintègre la composition de page complète. Cela dit, j'ai tenté :
- soit de supprimer cette mention
- soit de fixer la marge à 0px
mais rien n'y fait

"Ishiro" a écrit :
La propriété text-indent va déplacer le contenu du h1, pas le background (qui devrait donc s'afficher)

Je partage ce raisonnement

"Ishiro" a écrit :
Dans la propriété background, tu dois mettre l'url relative à ta CSS... Normalement ton code devrait fonctionner

Tu partages, sur ce point, l'avis de Mikachu. Le soucis provient peut-être de là. Comment dois-je procéder alors ? Dois-je placer, à l'intérieur du dossier "Styles" un autre dossier "Images" contenant les backgrounds ?
Essaye comme ceci :
background: url(../images/Logo.gif) no-repeat 0 0;


Ta CSS est dans le dossier "Styles". A partir de ce dossier, il faut remonter un répertoire (d'où le "..") pour pouvoir accéder à ton dossier "images".
Je comprend seulement maintenant l'abomination que tu essaye de faire...

La solution a ton problème est simple : L'image DOIT se trouver dans le code HTML avec l'attribut alt qui va bien. Premièrement ça te permettra de résoudre ton problème ; deuxièmement, ton site aura un "logo" même si les images ne sont pas chargées/désactivés.

a écrit :
Garder le texte dans le html me semble préférable pour l'accessibilité.
Hey bien, justement, non. Ta technique est tout à fait innaccessible.
Modifié par Laurie-Anne (22 Oct 2009 - 14:57)
Bingo!
Merci Ishiro ! Le problème provenait bien de là ! Mikachu aussi l'avait pressenti. Ainsi, si je comprends bien, toutes les images de background appelées à partir de la CSS doivent comporter l'appel sous forme de "url(../images/image.gif)" alors que celles appelées à partir du html comportent l'appel "url(images/image.gif)"
Est-ce bien exact ?

"Laurie-Anne" a écrit :
Hey bien, justement, non. Ta technique est tout à fait innaccessible.

Pourquoi donc ?
Arko82 a écrit :
Bingo!
Merci Ishiro ! Le problème provenait bien de là ! Mikachu aussi l'avait pressenti. Ainsi, si je comprends bien, toutes les images de background appelées à partir de la CSS doivent comporter l'appel sous forme de "url(../images/image.gif)" alors que celles appelées à partir du html comportent l'appel "url(images/image.gif)"
Est-ce bien exact ?

Non, ça dépends de l'architecture des dossiers/fichiers de ton site.


Arko82 a écrit :
Pourquoi donc ?
Il me semble l'avoir expliqué... Parce que si l'image ne se charge pas (par exemple parce que tu te trompe de chemin pour l'appeler) il n'y a plus rien, les styles CSS étant toujours actifs.
Sujet clos
Aller à