HTML/CSS: Bakgrundsbild storlek?

JimmyAndersson · Inlägg av **JimmyAndersson** » 12 april 2011, 20:08:23

Jag vet, det låter så enkelt.

Jag försöker helt enkelt att definiera storleken på en bild i en css-klass för en tabellcell:

.tabellgrund {
	background-image: url('bilder/tabell_uppehoger_bakgrund.gif');
	background-repeat: no-repeat;
	}

Men hur anger jag storleken på bilden?
Jag vill att den ska sträckas ut så att den fyller hela tabellcellen
oavsett om cellen är 100px eller 500px.

Jodå, jag har googlat och varenda ställe skriver att man ska göra såhär:

.tablecell{
background: #fff url(/images/products/pic1.png) no-repeat;
height: 100px;
width: 100px;}

Men det är helt åt skogen fel eftersom ""height" och "width" där bestämmer storleken på hela tabellcellen.
De gör alltså tvärt om: Låter tabellcellen bli lika stor som bilden.

Hur många webläsare stödjer CSS3 nu? Där finns ju "background-size"

Men helst vill jag lösa det med CSS 1 eller 2.

Så, som sagt: Hur anger man en bakgrundsbilds storlek med css?

henkebus · Inlägg av **henkebus** » 12 april 2011, 23:23:57

Hej

Jag tror tyvärr inte att det går att stretcha bilden som du vill med CSS1 eller 2.
Sen är det nog så att vill du stödja äldre läsare (inte css 3), så är det bara att bita i det sura äpplet och hitta på en workaround som passar dig.

Mvh H

4kTRB · Inlägg av **4kTRB** » 13 april 2011, 00:02:48

Du kan fejka med en strechad bild men du får trixa med övrigt innehåll i cellen
tex genom att lägga det i en <div> ovanpå.

Kod: Markera allt

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.cellA {
  	margin: 0;
  	padding: 0;
	
}
.img {
	position:relative;
  	top:0;
  	left:0;
  	width:100%;
  	height:100%;	
}


</style>
</head>
<body>
<div align="center"><center>

<table border="1" width="600">
    <tr>
        <td class="cellA" width="300" height="400">
        <img class="img" alt="bakgrundsbild" src="bild.gif"></td>
        <td class="cellB" width="300" height="400"></td>
    </tr>
    <tr>
        <td class="cellC" width="300" height="400">C</td>
        <td class="cellD" width="300" height="400">D</td>
    </tr>
</table>
</center></div>
</body>
</html>

JimmyAndersson · Inlägg av **JimmyAndersson** » 13 april 2011, 00:27:09

Jag fick lösa det ungefär sådär, för CSS3 background-size verkar inte stödjas i Firefox 3.6.
Annars klarade den versionen alla test som finns här: http://www.css3.info/selectors-test

Det här var en bra sida:
http://www.css3.info/preview

För att se hur det blir (eller inte blir) med background-size:
http://www.css3.info/preview/background-size

Så då vet man det.

4kTRB · Inlägg av **4kTRB** » 13 april 2011, 00:34:25

Det finns en testsida för att se om browsern supportar stretchad bakgrund.
http://webdesign.about.com/od/examples/ ... xample.htm

JimmyAndersson · Inlägg av **JimmyAndersson** » 13 april 2011, 00:48:13

Hos mig visas bilden med katterna som en liten bild (50x38 pixlar) uppe i rutans vänstra hörn,
så då var det bekräftat att Firefox 3.6.13 inte stödjer det.

Och innan någon hinner skriva det:
Jodå, jag vet att det finns nyare versioner av Firefox.

(Däremot vet jag inte hur pass mycket av CSS3 som stödjs där.)

sodjan · Inlägg av **sodjan** » 13 april 2011, 11:49:11

Katterna tänjs ut i alla fall (FF 4.0 här).
FF 4.0 fungerar för övrigt helt utmärkt.
Fick installera om Handelsbankens säkerhetsprogram,
men det var ett känt fenomen....

HTML/CSS: Bakgrundsbild storlek?

HTML/CSS: Bakgrundsbild storlek?

Re: HTML/CSS: Bakgrundsbild storlek?

Re: HTML/CSS: Bakgrundsbild storlek?

Re: HTML/CSS: Bakgrundsbild storlek?

Re: HTML/CSS: Bakgrundsbild storlek?

Re: HTML/CSS: Bakgrundsbild storlek?

Re: HTML/CSS: Bakgrundsbild storlek?