HTML & CSSur HTML, XHTML & CSS
8 svar · 795 visningar · startad av Emil W
Har aldrig hållit på med bakgrunder i en div box, jag skulle vilja göra så att
den här blir bredare och högre.
Hur gör man det ?
Bifogar även bakgrunden jag vill ska bli stor.
Öh?
Vill du att den ska upprepas både horisontellt och vertikalt? I så fall: i stilmallen för divven skriver du:
background: url(file:mina-bilder/background.jpg) repeat;
Red: Givetvis ändrar du sökvägen till bilden så att den stämmer för dig.
Jag vill att det ska bara vara en bakgrund så att bara en blir utstreckt.
Jag vill att det ska bara vara en bakgrund så att bara en blir utstreckt.
Det är omöjligt att förstå exakt vad du menar. Man måste gissa...
Förstod du mitt förra inlägg? Har du en stilmall? Vet du hur du ändrar sökvägen? Fungerade det som det skulle?
Eller menar du att blden inte ska repetera, utan sträckas ut i bakgrunden till divvens hela bredd och höjd? I så fall: Det går inte (och skulle dessutom se förjäkligt ut eftersom pixlarna skulle dras isär).
Det går faktiskt, med lite merjobb.. :)
struktur:
<div style="position: relative; width: 200px; height: 200px">
<img style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="bild.jpg" />
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;">innehåll</div>
</div>
Dock är jag inte riktigt hundra på vad som händer om du inte sätter höjden explicit på den yttre div-taggen..
Det går faktiskt, med lite merjobb.. :)
struktur:
<div style="position: relative; width: 200px; height: 200px">
<img style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="bild.jpg" />
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index:100;">innehåll</div>
</div>Dock är jag inte riktigt hundra på vad som händer om du inte sätter höjden explicit på den yttre div-taggen..
Njae... det där är egentligen inte alls att sätta bakgrund på divven, utan en lösning som ger sken av att divven har en bakgrund. ;) Men funkar det, så funkar det.
Jag hade nog klämt dit ett z-index på innehållsdivven i alla fall för att vara säker på att den hamnar överst cross browser (se min fetning i citatet ovan)
Visst, lite fulhack, men, men, det är resultatet som räknas :)
Det är ju bara att sätta repeat på bilden i stilmallen som Danne V skriver.
Dvs. det du behöver göra är att skriva lite CSS.
Antingen skriver du det i en separat css-fil, t.ex. style.css, eller i <head> med <style>-taggen och lägger till
"Danne V skrev:
background: url(file:mina-bilder/background.jpg) repeat;
Det sista alternativet är att du skriver det direkt i div-taggen
<div id="[I]den div du vill ha bakgrunden i[/I]" style="background: url("din bildmapp/background.jpg") repeat;">[i]innehåll här...[/i]</div>
Dock rekommenderar jag de två första alternativen, då det är enklast att redigera om all css är samlad på en plats i koden.
Du får dela in bilden i flera bilder. Det verkar som om du har en skugga till höger och en skugga under bilden. Gör då två element:
En bild som är lika bred som sidan och har en skugga till höger. Den sätter du till:
background: url('background.jpg');
background-repeat:repeat-y;
Sen en bottom som du sätter till:
background: url('bottom.jpg');
background-repeat:no-repeat;
Css koden borde bli typ såhär:
#top
{
background: url('background.jpg');
background-repeat:repeat-y;
padding: 5px;
}
#bottom
{
background: url('bottom.jpg');
background-repeat:no-repeat;
padding: 5px;
}
Html koden:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css-filen.css" />
</head>
<body>
<div id="top">
<p>hej</p>
</div>
<div id="bottom">
<p>design by *****</p>
</div>
</body>
</html>