hej jag undrar hur man ska göra för att få bakgrundsbilden på sin egen hemsida att passa bra till olika dataskärmar så att den se likastor ut på en lite skärm som på en liten. Mvh//Niklas
Anpassa bakgrundsbild
7 svar · 769 visningar · startad av kermit4
Du får nog förklara lite bättre hur du menar?
T.ex, ska bilden täcka en viss procent av viss yta, vad är det för typ av bild osv.
det är en jpg fil. Just nu så har jag gjort bilden så att den passar på sen stor skärm på skolan. men hemma så ser jag bara en del av bilden. jag vill kunna se 100% av bilden oavsett vilken bildskärm jag hanvänder till att kolla på hemsidan. jag har fått reda på hur jag göra för att den inte ska dubliceras, nu är problemet att den är för stor på småa skärmar. såhär ser det ut just nu
<HTML>
<HEAD>
<TITLE>Niklas hemsida</TITLE>
<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration:none;
}
}
-->
</style>
</HEAD>
<BODY style="background:url('strand3.jpg') no-repeat;" BACKGROUND="strand3.JPG" TEXT="FFFFFF" LINK="#FFFFFF" VLINK="#FFFFFF" ALINK="#FFFFF">
<BR>
<HR WIDTH="90%">
</HR WIDTH="90%">
det finns just nu inget sätt - mig veterligen som gör en sån sak för alla webbläsare...
tar mig dock friheter att editera din kod, framförallt din css och bodytagg... ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Niklas hemsida</title>
<style type="text/css">
<!--
body {
background:url('strand3.jpg') no-repeat;
color:#fff;
}
a:link {
text-decoration: none;
color:#fff;
}
a:visited {
text-decoration:none;
color:#fff;
}
hr {
width:90%;
}
-->
</style>
</head>
<body>
<br>
<hr>
</body>
</html>
Hmm...
Det finns ett par sätt, men man måste "fnula" genom att lägga två "lager" på varandra istället för att hålla sig till CSS-mekanismerna.
Om du lägger en bild (en vanlig <img>) i ett "bakre lager" och hela din webbsida i ett "främre" så...
Det finns ett par gamla trådar och inlägg här på wF som beskriver några olika varianter om du orkar söka lite noggrannare än vad jag gjorde inatt, men den här hittade jag iallafall: http://www.webforum.nu/showthread.php?p=1224575#post1224575 och den pekar ut "kanin-exemplet" i http://www.cssplay.co.uk/layouts/background.html
Lycka till! :birp
Jo - förresten... Om du bara sätter "width='100%'" på bilden i bakgrundslagret och låter webbläsaren hantera height, så skalas bilden proportionellt (och inte som kaninen i exemplet som blir lite - ehm - manglad ibland beroende på hur man ändrar storlek på webbläsaren ;) )
... och sen vill jag bara tillägga:
Välkommen till wF kermit4 :birp
Hej
Det är min första hemsida jag håller på med så jag är inte så jätte duktig :p
Men bara två frågor, vart ska jag lägga with100% och vad ska man skriva emella mina länkar så att dom kommer under rätt bild i bakgrunds bilden? :S
Tack så mycket!! :birp
kermit4 skrev:
vart ska jag lägga with100%
Hmm...
Kolla igenom den här trestegsgenomgången av metoden (kolla kommentarerna i källkoden i resp exempelfil)
-
Börja med att lägga en bild i ett "lager" så att den täcker hela skärmytan
http://member.webforum.nu/2241/bg1.html
Förstora webbläsarfönsret lite hit och dit på höjden och tvären så ser du hur det funkar. -
Lägg till ett "lager" där du senare kan lägga hela din webbsida
http://member.webforum.nu/2241/bg2.html -
Bilden ser fortfarande konstig ut eftersom den skalas utan proportioner, men det åtgärdar du genom att ta bort "height" för bilden (eller ställa in height: auto som i exemplet)
http://member.webforum.nu/2241/bg3.html
Som du ser gäller det att ta till en "lagom" bild eftersom en för liten snabbt utsätts för "pixeleringseffekter" när webbläsarens yta är bredare/högre än bildens originalmått (det är alltså samma bildfil som används i alla tre exemplen)
kermit4 skrev:
vad ska man skriva emella mina länkar så att dom kommer under rätt bild i bakgrunds bilden?
Hmm...
Nu känns det som att du missat att tala om något här :)
Positionering kan göras på olika sätt och vad som är "bäst" beror lite på hur du tänker dig att det skall se ut i slutänden...
Antingen kan du positionera med margin och padding tillsammans med float, eller också t.ex. med position:absolute (har för mig att det finns ett och annat exempel på sån't här på wF som vi om inte annat kan hjälpa dig hitta när vi vet lite mer om vad du egentligen vill göra)
MEN hursomhelst - Följer du rådet att "inte använda height" blir det förmodligen inte så enkelt för dig (eller oss ;) att klura sig fram till var dina länkar skall hamna i relation till bildens höjdaxel - men det är en annan historia som vi kan ta när vi ser vad du egentligen vill göra
Lycka till :bire
tack så mycket!! :@
Jag tog bara <UL> mellan länkarna :@ det funkar bra för mig på min första hemsida :P
min mor känner någon som älskar att göra hemsidor så jag skulle få hennes msn. men jag får försöka fixa det annars eller får jag låta det vara : @