Aller au contenu

Appliquer un lien hypertexte sur un background

ivoyages

Par ivoyages
dans (X)HTML et CSS

 Partager

Sujets conseillés

ivoyages

ivoyages

Posté
Posté

Bonsoir,

J'appelle un background depuis ma feuille de style comme ceci :

    body {
    margin-top:24px;
    background-color:#FDFCFA;
    background:url(../templates/temp/img/bckgrd-TheNorthFace.jpg) top center no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:1.5;
    }

Comment appliquer au background un lien hypertexte ?

Je suis preneur d'infos car je ne vois pas du tout.

Merci

Greg

Lien vers le commentaire
Partager sur d’autres sites
ivoyages

ivoyages

Posté
  • Auteur
Posté

tu ne peux pas, en fait, c'est le contraire qu'il faut faire : appliquer un background à un lien hypertexte

Ah ok.

ET je fais ça comment

J'ai tenté :

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.5;
}
.thenorthface{
margin-top:24px;
background-color:#FDFCFA;
background:url(../templates/temp/img/bckgrd-TheNorthFace.jpg) top center no-repeat;
display:block;
width:1903px;
height:930px;
}

et dans le html :

<a href="#"><div class="thenorthface"></div></a>

mais le background est au dessus du reste du tempalte :wacko:

Lien vers le commentaire
Partager sur d’autres sites
MarvinLeRouge

MarvinLeRouge

Posté
Posté (modifié)

Salut,

Alors,

  1. Tu ne peux pas mettre un div dans un a (a est un élément inline donc ne doit contenir que des éléments inline)
  2. En revanche, tu peux tout à fait donner à ton lien un aspect de type bloc
  3. Et il va falloir que tu joues sur les z-index pour que le reste soit quand même au-dessus
  4. Et tant qu'on y est, on met du contenu à ton lien

Ca donnerait un truc du style

<body>
<a class="thenorthface">du texte qui décrit bien ton lien</a>
<div class="wrapper">
Le reste de la page
</div>
</body>


.thenorthface {
position : fixed;
z-index : 1;
left : 0;
top : 0;
width : 100%;
height : 100%;
text-indent : -5000px;
overflow : hidden;
background : url("une image assez grande pour couvrir l'écran, de préférence conçue pour passer en repeat");
}
.wrapper {
position : relative;
z-index : 2;
}

Modifié par MarvinLeRouge
Lien vers le commentaire
Partager sur d’autres sites
ivoyages

ivoyages

Posté
  • Auteur
Posté

Salut,

Alors,

  1. Tu ne peux pas mettre un div dans un a (a est un élément inline donc ne doit contenir que des éléments inline)
  2. En revanche, tu peux tout à fait donner à ton lien un aspect de type bloc
  3. Et il va falloir que tu joues sur les z-index pour que le reste soit quand même au-dessus
  4. Et tant qu'on y est, on met du contenu à ton lien

Ca donnerait un truc du style

<body>
<a class="thenorthface">du texte qui décrit bien ton lien</a>
<div class="wrapper">
Le reste de la page
</div>
</body>


.thenorthface {
position : fixed;
z-index : 1;
left : 0;
top : 0;
width : 100%;
height : 100%;
text-indent : -5000px;
overflow : hidden;
background : url("une image assez grande pour couvrir l'écran, de préférence conçue pour passer en repeat");
}
.wrapper {
position : relative;
z-index : 2;
}

Merci pour le bout de code. Un pote l'a fait pour moi entre temps...

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...