hej
jag använder mej av css för att få en bild precis vid kanten
background-image: url(linje.gif); background-repeat: no-repeat; background-position: left;
hur kan jag få bilden att vara på båda kanter av sidan?
Bakgrund på båda sidor!
6 svar · 549 visningar · startad av aDay
Det är lite svårt att förstå vad du menar men du kan bara lägga inte EN bakgrundsbild per tagg.
Du kan ju skapa två 100% höga tabeller - en som är placerad till vänster och en till höger och sedan lägga in dina bakgrundsbilder i dom.
Är det se att du vill få bakgrundsbilden att sträcka sig över hela sidan? I så fall kan du kolla på det här inlägget:
http://www.webforum.nu/showthread.php?s=&postid=692200#post692200
Hmm...
Klurade lite på detta...
I xhtml 1.0 är ju html rotelementet... Och i Standards mode har även html-taggen ett utseende som "blocktagg" (det vet ju alla vi som slagits med att få kod typ <div style="height:100%"> att fungera över hela webbläsarfönstret :) )
Så jag testade att lägga en bakgrundsbild även i denna, och se på f-n det fungerade! Och detta *helt* utan "extra fluff" i xhtml-koden ;)
Här är exemplet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Bakgrundsbilder</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html, body { height:100%; padding:0px; margin:0px; width:100%;}
html {
/* Bakgrundsbild 1 */
background-image:url(testbild.gif);
background-repeat:no-repeat;
background-position:top left;
}
body {
/* Bakgrundsbild 2 */
background-image:url(testbild.gif);
background-repeat:no-repeat;
background-position:bottom right;
position:absolute; /* workaround för Mozilla (!!!) */
/* Centrera exempeltexten (ej del av finessen ;) */
text-align:center;
}
div {margin:0; padding:0;}
-->
</style>
</head>
<body>
<div>
<h1>Två bakgrundsbilder</h1>
<p>En i body och en i html...</p>
</div>
</body>
</html>
Finns för provkörning här:
http://member.webforum.nu/2241/bakgrundsbilder.html
Det enda jag var tvungen att trixa lite med för att få till det i både MSIE6 och Mozilla 1.3 med "rätt" marginaler och utan scrollningslister var att sätta en position:absolute på bodytaggen och ge den 100% höjd och bredd - gör man inte det blir marginalen på bodytaggen inte vad man tänkt sig i Mozilla 1.3 - av någon anledning som jag inte orkade klura ut ;)
Nu hoppas jag bara att det var detta du var ute efter :e
Snygt :birp
jarvklo skrev:
Hmm...
Klurade lite på detta...
...
Finns för provkörning här:
http://member.webforum.nu/2241/bakgrundsbilder.html
Vad konstigt det blev på min Mac. Eller var det meningen att det skulle bli en bild uppe i vänstra hörnet och en likadan bild nere i högra hörnet. (både i Safari, Camino, IE och Opera).
Jag trodde att aDay ville ha som två border på sidan men jag kanske missförstod honom ...
Jodå det var min mening - jag tog mig bara friheten att ta i lite extra med CSS:en för att understryka möjligheterna med koden i exemplet ;)
Det borde bara vara att byta ut
background-position:top left;
...
background-position:bottom right;
mot
background-position:left;
...
background-position:right;
och köra med högre bilder för att få det mer åt det hållet...
Sorry 'bout the confusion :birp