---
title: "Bakgrundsbild/Bakgrundsfärg i CSS"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/155625-bakgrundsbild-bakgrundsfärg-i-css"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "aasah"
published: "2007-01-06T16:00:03.000Z"
updated: "2007-01-09T17:24:07.000Z"
replies: 9
views: 847
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/155625-bakgrundsbild-bakgrundsfärg-i-css"
---

# Bakgrundsbild/Bakgrundsfärg i CSS

## #1 — aasah, 2007-01-06T16:00Z

I min CSS har jag bl.a. följande definition: 

```
#cw td.vit {
  background:url(vitRuta.gif);
  color:black;
  font-weight: bold;
  padding:5px;
  margin:0
}
```

Bakgrundsbilden är helt enkelt en vit ruta med svart kant. Skulle jag kunna åstadkomma samma effekt om jag istället skrev: 

```
#cw td.vit {
  background:url(transparentRuta.gif);
  background-color: #fff;
  color:black;
  font-weight: bold;
  padding:5px;
  margin:0
}
```

Förutsatt att transparentRuta.gif var just transparant?

Och skulle det i så fall vara något så när enkelt att byta bakgrundsfärgen temporärt (via JavaScript)?

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

## #2 — skogga, 2007-01-06T19:11Z

Prova.

Som svar, det ska funka. Varför har du en genomskinlig bild, är den till för att ge en ram? Om det är så kan du göra allt det med lite css-kod.

```
#cw td.vit {
  background-color: #fff;
  color: #000;
  font-weight: bold;
  padding:5px;
  margin:0;
  [b]border: 1px solid #000;[/b]
}
```

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

## #3 — aasah, 2007-01-06T19:37Z

> **skogga skrev:**
>
> Prova.
> 
> Som svar, det ska funka. Varför har du en genomskinlig bild, är den till för att ge en ram? ...

Nej, den finns där för att vissa rutor *måste* ha bakgrundsbilder eftersom de innehåller svängande pilar (det bildar ett korsord). Men jag vill kunna markera aktuellt ord, helst utan att behöva ha dubbel uppsättning bakgrundsbilder, och i stället bara ändra bakgrundens färg...

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

## #4 — skogga, 2007-01-06T19:47Z

Aha, okej. Men är bara bilden genomskinlig så ska det funka att endast ändra bakgrundsfärgen via CSS+Javascript.

```
document.getElementById('MinRuta').style.backgroundColor = '#AAAAAA';
```

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

## #5 — aasah, 2007-01-07T12:50Z

Tyvärr verkar det inte funka...   :( Frågan är varför...

Om man trycker i någon vit ruta, och sedan går in i den översta radens textfield i den undre tabellen (bredvid "Change this letter"-knappen), så **borde** den ruta jag tryckt på bli blå... Eller?   :q Hur som helst vill den inte... :( [Webbsidan](http://www.tydal.nu/aasah/Lab/IntCW/jsTstSourceNotGen.html) 

(Eftersom jag testar gäller detta alla rutor utom den med svängande pil. Den är fortfarande statiskt vit.)

```
/*utdrag ur min CSS - vitRutaT.gif är transparant.*/
#cw td.vit {
  background:url(http://www.tydal.nu/aasah/Lab/IntCW/vitRutaT.gif); /*test (aasah/img/CWs/vitRuta.gif)*/
  background-color:#ffffff /*test */
  color:black;
  font-weight: bold;
  border:1px solid black;
  padding:5px;
  margin:0
}
```

```
//I JS block
function markLetter() {
   var td = document.getElementById('currentPos');
   var pos = td.innerHTML;
   var cwVisiblePos = document.getElementById('td_'+pos);
   cwVisiblePos.style.backgroundColor = '#336699';
 }

function unmarkLetter() {
   var td = document.getElementById('currentPos');
   var pos = td.innerHTML;
   var cwVisiblePos = document.getElementById('td_'+pos);
   cwVisiblePos.style.backgroundColor = '#ffffff';
}

//I ren HTML-kod
   <tr><td id="currentPos">-</td>
       <td><input type="text" id="wordBoxLetter" value="" size="1" disabled onFocus="markLetter()" onBlur="unmarkLetter()"> <!--  -->
           <input type="button" class="buttonColorG" id="wordBoxLetterButton"
                  onclick="addLetter()" value="Change this letter!" disabled>
       </td>
   </tr>
```

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

## #6 — skogga, 2007-01-07T17:32Z

Håller på att kolla lite på din kod där, jag upptäckte ett fel i din css-kod:

```
#cw td.vit {
  background:url(http://www.tydal.nu/aasah/Lab/IntCW/vitRutaT.gif); /*test (aasah/img/CWs/vitRuta.gif)*/
  [b]background-color:#ffffff /*test */[/b]
  color:black;
  font-weight: bold;
  border:1px solid black;
  padding:5px;
  margin:0
}
```

Den fetmarkerade raden har ingen avslutande semikolon ";" vilket gör att värdet color inte kommer att funka.

Vad gäller färgen så borde det vad jag ser funka, men jag ska kolla lite mer på detta om en stund.

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

## #7 — aasah, 2007-01-07T22:19Z

> **skogga skrev:**
>
> Håller på att kolla lite på din kod där, jag upptäckte ett fel i din css-kod:...
> Den fetmarkerade raden har ingen avslutande semikolon ";" vilket gör att värdet color inte kommer att funka.

Fixat nu. Se nedan.

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

## #8 — aasah, 2007-01-09T14:46Z

Tack! Nu funkar det!  :e

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

## #9 — skogga, 2007-01-09T16:36Z

Vad var felet? Kan vara kul att få veta.

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

## #10 — aasah, 2007-01-09T17:24Z

Det där ';'-et var felet. Att det inte verkade funka efter det berodde på kvalificerad klantighet från vänstertecknad... :r (Laddade upp fel fil...)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/155625-bakgrundsbild-bakgrundsfärg-i-css