Sida 1 av 1
HTML/CSS: Bakgrundsbild storlek?
Postat: 12 april 2011, 20:08:23
av JimmyAndersson
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:
Kod: Markera allt
.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?
Re: HTML/CSS: Bakgrundsbild storlek?
Postat: 12 april 2011, 23:23:57
av henkebus
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
Re: HTML/CSS: Bakgrundsbild storlek?
Postat: 13 april 2011, 00:02:48
av 4kTRB
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>
Re: HTML/CSS: Bakgrundsbild storlek?
Postat: 13 april 2011, 00:27:09
av JimmyAndersson
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.
Re: HTML/CSS: Bakgrundsbild storlek?
Postat: 13 april 2011, 00:34:25
av 4kTRB
Det finns en testsida för att se om browsern supportar stretchad bakgrund.
http://webdesign.about.com/od/examples/ ... xample.htm
Re: HTML/CSS: Bakgrundsbild storlek?
Postat: 13 april 2011, 00:48:13
av JimmyAndersson
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.)
Re: HTML/CSS: Bakgrundsbild storlek?
Postat: 13 april 2011, 11:49:11
av sodjan
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....