---
title: "a:hover - background-image"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/160147-a-hover-background-image"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "rundberg"
published: "2007-05-10T17:08:26.000Z"
updated: "2007-05-14T07:36:08.000Z"
replies: 9
views: 583
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/160147-a-hover-background-image"
---

# a:hover - background-image

## #1 — rundberg, 2007-05-10T17:08Z

Jag försöker få till en länk som när man hovrar över den så skall en bakgrundsbild dyka upp bakom själva länken. Varför fungerar inte denna kod som jag har i min css mall 

```
a.1:hover {background-image: url(bilder/1.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left top;
}
```

Motsvarande html kod 

```
<a class="1" href="#">LÄNK 1</a><br>
```

borde inte nu min "bild1" visas bakom länken när jag hovrar över den?

//Rundberg

Permalänk: https://www.webforum.nu/p/160147

## #2 — rundberg, 2007-05-10T17:51Z

Jag fick det att fungera om jag tog bort "1" ur a.1:hover och då bara hade \<a href...
men jgah ar några andra funderingar. Kan man ställa in hur mycket av bilden som skall visas?, jag vill att resten av bilden skall visas "utanför" länken om man säger så. Som jag har det nu så har jagh en bild som är rätt höjd med 180px bred, vilket är tre gånger så brett som min länk text. Kan man göra så att alla dessa 180 px av bilden visas?

Sen skulle jag villa ha olika bilder för olika länkar så kan man inte fixa det med typ a.1:hover, a.2:hover o.s.v.?

Permalänk: https://www.webforum.nu/p/1973558

## #3 — Fuel, 2007-05-10T18:12Z

Byt ut klassnamnet till lank1 istället för bara 1

Permalänk: https://www.webforum.nu/p/1973564

## #4 — tanten, 2007-05-10T18:14Z

Jagtror en bättre lösning är att placera bilden i li, du har väl länken i någon form av lista och sedan byter ut din 
a.1:hover{
till
li a:hover{
och sätter width på den.

Permalänk: https://www.webforum.nu/p/1973565

## #5 — colione, 2007-05-10T18:27Z

Ett classnamn får inte börja på en siffra.

Marker tråden som löst också, och välj rätt svar den här gången. Inte som du gjorde i javascripttråden:

<http://www.webforum.nu/showthread.php?p=1313540#post1313540>

Permalänk: https://www.webforum.nu/p/1973570

## #6 — rundberg, 2007-05-12T09:21Z

Okej. Tack för alla svar. Skall testa büde Fuels och tantens lösningar och se vad som fungerar bäst. Troode inte det spelade sa stor roll vilket svar man markerade som löst, men nu vet jag och slall göra rätt i fortsättningen

Permalänk: https://www.webforum.nu/p/1976841

## #7 — rundberg, 2007-05-14T07:22Z

Jag har fortfarande problem med att få det att fungera.
Min css ser nu ut så här: 

```
li {
   list-style-type: none;
   width: 150px;
   margin: 5px 0px 5px 0px;
   border: 1px solid white;
}

li a.lank1:hover {
   background-image: url(bilder/1.gif);
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-position: left top;
   width: 150px;
}
```

Och min html fil ser ut så här:

```
<u1>
<li><a class="lank1" href="#">LÄNK 1</a></li>
<li>LÄNK 2</li>
<li>LÄNK 3</li>
<li>LÄNK 4</li>
<li>LÄNK 5</li>
<li>LÄNK 6</li>
<li>LÄNK 7</li>
<li>LÄNK 8</li>
</u1>
```

Men fortfarande så sträcker sig inte bilden ut över hela "länkområdet" (150px) utan bara så långt länktexten sträcker sig. Jag måste ha olika \<a classar\> för jag vill ha olika blider på olika länkar. Nån idé om vad som kan vara fel?

//Rundberg

Permalänk: https://www.webforum.nu/p/1977445

## #8 — voigtann1, 2007-05-14T07:29Z

```
li a {
width:150px;
display:block;
}
```

 Kanske?

Permalänk: https://www.webforum.nu/p/1977447

## #9 — rundberg, 2007-05-14T07:35Z

Jag löste det själv med display:block;

Permalänk: https://www.webforum.nu/p/1977451

## #10 — rundberg, 2007-05-14T07:36Z

mm, takc så mycket. \_Han inte uppdatera sidan innan jag skickade.

Permalänk: https://www.webforum.nu/p/1977452

---

Tråden på webben: https://www.webforum.nu/amne/html-css/160147-a-hover-background-image