Compatibilité Firefox : background-image

**-thierry-** · 01/10/2014, 18h24

Bonjour,
Le but est d'afficher dans l'angle (haut-gauche) de la page une zone en arc de cercle avec une icône à l'intérieur (via background-image : back.png est une simple flèche vers la gauche de 18*14 pixels, ci-jointe). Lorsque le curseur survole la zone celle-ci change de couleur, et un clic permet de naviguer vers la page précédente.
Le code ci-dessous fonctionne très bien avec IE, Chrome, Safari et Opera mais pas avec Firefox.
Savez-vous pourquoi ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Test css avec firefox</title>
    <style>
        #back {
            position: absolute;
            top: -20px;
            left: -20px;
            width: 50px;
            height: 50px;
            background-color: orangered;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius: 25px;
            line-height: 50px;
            background-image: url("back.png");
            background-repeat: no-repeat;
            background-position-x: 22px;
            background-position-y: 24px;
        }
 
        #back:hover {
                background-color: yellow;
        }
    </style>
</head>
<body>
    <a href="javascript:history.back()"><div id="back"></div></a>
</body>
</html>

**NoSmoking** · 01/10/2014, 18h38

Bonjour,
à priori^(*) aucune raison que cela ne fonctionne pas même si tu pourrais te passer d'utiliser un lien.

^(*)il faut bien sûr qu'il y ait eu des pages avant

**-thierry-** · 01/10/2014, 18h45

J'ai oublié de dire ce qui ne fonctionne pas... ce n'est pas la navigation mais l'image qui ne s'affiche pas.
Seul Firefox me pose ce problème.

**Candygirl** · 01/10/2014, 18h51

Hello,

Les propriétés background-position-x et background-position-y n'existent pas dans les recommandations css3. Pourquoi ne pas utiliser tout simplement background-position: 22px 24px; ?

**-thierry-** · 01/10/2014, 18h54

Génial, merci bcp.

Compatibilité Firefox : background-image

CSS

Discussions similaires

Partager

Partager