Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1005 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [XHTML + CSS] Utilisation de la property css background

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[XHTML + CSS] Utilisation de la property css background

n°492068
Cherrytree
cn=?
Posté le 20-08-2003 à 08:28:21  profilanswer
 

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


 

Code :
  1. #header {
  2.     background: url(images/title.gif) no-repeat;
  3.     height: 53px;
  4.     margin: 10px;
  5.     width: 148px;
  6. }
  7. .alt {
  8.     display: none;
  9. }


 
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
mood
Publicité
Posté le 20-08-2003 à 08:28:21  profilanswer
 

n°492075
gizmo
Posté le 20-08-2003 à 08:42:27  profilanswer
 

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

n°492078
urd-sama
waste of space
Posté le 20-08-2003 à 08:44:26  profilanswer
 

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

n°492085
urd-sama
waste of space
Posté le 20-08-2003 à 08:52:46  profilanswer
 

j'ai obtenu qqch avec ca:

Code :
  1. .header {
  2.               background-image: url('image.gif');
  3.               height: 53px;
  4.               margin: 10px;
  5.               width: 148px;
  6.               border: 1px black solid;
  7.         }


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
n°492117
Cherrytree
cn=?
Posté le 20-08-2003 à 09:47:32  profilanswer
 

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
n°492118
Cherrytree
cn=?
Posté le 20-08-2003 à 09:49:13  profilanswer
 

Urd-sama a écrit :

j'ai obtenu qqch avec ca:

Code :
  1. .header {
  2.               background-image: url('image.gif');
  3.               height: 53px;
  4.               margin: 10px;
  5.               width: 148px;
  6.               border: 1px black solid;
  7.         }


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
n°492121
urd-sama
waste of space
Posté le 20-08-2003 à 09:54:06  profilanswer
 

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:


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [XHTML + CSS] Utilisation de la property css background

 

Sujets relatifs
[XHTML CSS] Passer site de table en div[Validation] Concilier les balises à la con de Flash avec du XHTML.
[CSS] chevauchement de divs[XHTML] Validation XHTML et charset
[Html] Utilisation des positions absoluesCSS et passage de parametres
Tutoriels et exercices CSS[CSS] @page
[Validation] XHTML 1.0 Transitional CSS, Omittag No et Background 
Plus de sujets relatifs à : [XHTML + CSS] Utilisation de la property css background


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR