[XHTML + CSS] Utilisation de la property css background

Marsh Posté le 20-08-2003 à 08:28:21

Code :

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Toto</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 id="header"><span class="alt">Toto</span></h1>
</body>
</html>

Code :

#header {
background: url(images/title.gif) no-repeat;
height: 53px;
margin: 10px;
width: 148px;
}
.alt {
display: none;
}

J'essaie de faire afficher une image via background dans mon <h1>. J'ai vu faire cela dans http://www.zeldman.com, mais je n'arrive pas faire fonctionner mon code : aucune image n'apparait.

---------------
Le site de ma maman

Reply

Marsh Posté le 20-08-2003 à 08:28:21

Reply

Marsh Posté le 20-08-2003 à 08:42:27

l'adresse de l'image est-elle bien realtive à celle du CSS? et non celle de la page?

Reply

Marsh Posté le 20-08-2003 à 08:44:26

gizmo a écrit :

l'adresse de l'image est-elle bien realtive à celle du CSS? et non celle de la page?

oui :jap:
je vais essayer de faire quelques tests, je dois dire que j'avais jamais testé un background sur un h1

Reply

Marsh Posté le 20-08-2003 à 08:52:46

j'ai obtenu qqch avec ca:

Code :

.header {
background-image: url('image.gif');
height: 53px;
margin: 10px;
width: 148px;
border: 1px black solid;
}

et en enlevant l'appel de la class alt, qui en fait te cache tout. (le border c'est pour mieux voir). c'est qqch du style que tu cherches?

ps: on peut bien sur rajouter
background-repeat: no-repeat;

Message édité par urd-sama le 20-08-2003 à 08:53:22

Reply

Marsh Posté le 20-08-2003 à 09:47:32

gizmo a écrit :

l'adresse de l'image est-elle bien realtive à celle du CSS? et non celle de la page?

Bien vu, à tous les coups c'est ça. ça m'a tracassé pendant tout le trajet jusqu'à ma boite. Je teste illico, mais bon je suis sûr que c'est ça. Merci donc.

---------------
Le site de ma maman

Reply

Marsh Posté le 20-08-2003 à 09:49:13

Urd-sama a écrit :

j'ai obtenu qqch avec ca:

Code :

.header {
background-image: url('image.gif');
height: 53px;
margin: 10px;
width: 148px;
border: 1px black solid;
}

et en enlevant l'appel de la class alt, qui en fait te cache tout. (le border c'est pour mieux voir). c'est qqch du style que tu cherches?

ps: on peut bien sur rajouter
background-repeat: no-repeat;

Non, le display: none; n'est que pour le span. En gros c'est un fonctionnement dégradé pour les navigateurs qui ne parlent pas CSS. Si le css est bien analysé, l'image s'affiche. Sinon le texte.

---------------
Le site de ma maman

Reply

Marsh Posté le 20-08-2003 à 09:54:06

Cherrytree a écrit :

Non, le display: none; n'est que pour le span. En gros c'est un fonctionnement dégradé pour les navigateurs qui ne parlent pas CSS. Si le css est bien analysé, l'image s'affiche. Sinon le texte.

c'est bon à savoir merci :jap:

Reply

[XHTML + CSS] Utilisation de la property css background

Sujets relatifs:

Leave a Replay