CSS / BAKGRUNDER
Bakgrund på sidor
Genom att använda sig av CSS när man ska lägga in bakgrunder så kan detta läggas in så att man slipper redigera om varenda separat sida sen om man vill byta bakgrund nångång. Och att lägga in bakgrundsbilder m.h.a. CSS gör att du också kan hålla din sida valid.
För att lägga in en bakgrundsbild på sidan så rekommenderar jag att skapa en separat stilmall som du sen länkar till från html-dokumentet. Detta kan du göra genom att först kopiera och lägga till nedanstående css-kod i ett nytt textdokument...
body {
background: url(bakgrundsbild.gif);
}
background: url(bakgrundsbild.gif);
}
Vill du ha en bakgrundsfärg istället så ändra bara till:
body {
background: färg;
}
background: färg;
}
Därefter döper du textdokumentet till ex. "bakgrund.css". Se till så att filformatet är satt till "Alla filer" så att det inte sparas som vanligt text-dokument utan till just en css-fil. Därefter kan du länka till stilmallen genom att lägga in följande kodsnutt mellan HEAD-taggarna i ditt html-dokument: <LINK REL="stylesheet" TYPE="text/css" HREF="bakgrund.css">
Upprepning av bakgrundsbild
M.h.a. av CSS kan man också styra hur många ggr en bakgrundsbild ska upprepas på sidan.Genom att lägga till koden background-repeat: no-repeat; inom klamrarna, { och }
så kommer bakgrudsbilden endast att upprepas en gång. Exempel (Alternativ 1):
body {
background: url(bakgrundsbild.gif);
background-repeat: no-repeat;
}
background: url(bakgrundsbild.gif);
background-repeat: no-repeat;
}
(Alternativ 2):
body {
background: url(bakgrundsbild.gif) no-repeat;
}
Vill du repetera bakgrundsbilden endast i x-led, alltså bara horisontellt så skriver man background-repeat: repeat-x; inom klamrarna.
Exempel (Alternativ 1):background: url(bakgrundsbild.gif) no-repeat;
}
body {
background: url(bakgrundsbild.gif);
background-repeat: repeat-x;
}
background: url(bakgrundsbild.gif);
background-repeat: repeat-x;
}
(Alternativ 2):
body {
background: url(bakgrundsbild.gif) repeat-x;
}
För att istället endast repetera bilden i y-led (vertikalt) så skriv:background: url(bakgrundsbild.gif) repeat-x;
}
background-repeat: repeat-y;
Bakgrundsbild i tabell
Ska du använda dig av samma bakgrund i flera tabeller du skapar så är det smidigast om du först skapar CSS-kod som du lägger mellan HEAD-taggarna, och sen "anropar" CSS-koden genom att skriva in CLASS inom önskad tabell/cell:
Lägg följande kod mellan HEAD-taggarna på samma sida där du ska infoga bakgrunden i tabellen:
<style type="text/css">
<!--
.table_bg { background: url(bakgrund.gif); }
-->
</style>
<!--
.table_bg { background: url(bakgrund.gif); }
-->
</style>
Anropa sen CSS-koden genom att skriva in CLASS="table_bg" i önskad TABLE/TD-tagg:
<TABLE>
<TR>
<TD CLASS="table_bg">....
<TR>
<TD CLASS="table_bg">....
Men vill du inte göra på ovanstående sätt om du t.ex. ska lägga in olika bakgrunder i olika tabeller eller celler så kan du bädda in css-kod direkt i html-taggar genom att skriva som såhär: Bakgrund för en hel tabell:
<TABLE STYLE="background: url(bakgrundsbild.gif);">
<TR>
<TD>.....
<TR>
<TD>.....
Vill du ha en bakgrundsbild i en specifik cell så skriv in ovanstående css-kod i den utvalda TD-taggen istället! Exempel:
<TABLE>
<TR>
<TD STYLE="background: url(bakgrundsbild.gif);">
En cell med bakgrundsbild m.h.a. CSS...
</TD>
</TR>
</TABLE>
<TR>
<TD STYLE="background: url(bakgrundsbild.gif);">
En cell med bakgrundsbild m.h.a. CSS...
</TD>
</TR>
</TABLE>
Bakgrunder i formulär
För att använda en och samma färg -eller bakgrundsbild i formulären på alla dina sidor kan du enklast göra detta genom att skriva följande kod i en separat stilmall och sen länka alla sidor till mallen:
input, textarea {
background: url(bakgrundsbild.gif);
}
background: url(bakgrundsbild.gif);
}
Om du vill ha bakgrundsfärg:
input, textarea {
background: någon färg i hexkod lr text;
}
Om du vill ha olika bakgrundsbilder/bakgrundsfärger i olika formulär så kan du t.ex. skapa följande kod och lägga mellan HEAD-taggarna i ett html-dokument (har här också ändrat teckensnitt för formuläret som du ser i koden nedan):
background: någon färg i hexkod lr text;
}
<STYLE TYPE="text/css">
<!--
.form {
background: #EEEEEE;
font: 10px Verdana, sans-serif;
border: 1px solid #545454; }
-->
</STYLE>
<!--
.form {
background: #EEEEEE;
font: 10px Verdana, sans-serif;
border: 1px solid #545454; }
-->
</STYLE>
Sen anropar du scriptet mellan HEAD-taggarna genom att skriva in CLASS="form" INOM önskat formulär-fält. Exempel:
<INPUT TYPE="text" VALUE="Ett formulär-fält med text..." SIZE="40" CLASS="form"> Resultat på formulär-fält när jag kopplat formuläret till css-scriptet mellan HEAD-taggarna: