<body background="pelle.jpg"> Hela sidan är alltså nu kodad:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body background="pelle.jpg">
</body>
</html>
Enligt den nya standarden html5 och css3 skall du nu lägga bakgrundsbilden i din stylesheet. Stylesheet är ett väldigt praktiskt element i form av en fil som justerar alla dina sidor på samma gång. Du slipper alltså redigera alla sidor för att få en annorlunda bakgrund, fonter(bokstäver), länkar och så vidare. Din stylesheet sparar du som css och det enklaste är helt enkelt att öppna din notepad(anteckningar), spara som och namnge den stylesheet.css. Detta liknar spara som html vilket vi gick igenom i de första avsnitten. Se mer här>>> . Här sparade vi som .html och nu använder du istället spara som .css eller stylesheet.css . Många brukar lägga upp en mapp i public_html mappen vid namn css för att spara stylesheeten i. Det är inte nödvändigt men kan ge dig lite ordning och reda om du vill göra många sidor. Du kan även skriva stylesheet i headern men tvingas då kopiera den första sidan för att få samma bakgrund i de andra. Du har dock fortfarande problem med Internet Explorer och skall du göra bakgrunder för denna läsare blir du tvungen att använda en bild istället. Du kan läsa mer om detta längre ner på sidan.
Vad vi gör här, till att börja med, är att lägga in stylesheet i headern istället för en extern fil. Koden för att få samma resultat som ovan är att i headern lägga in raderna
<style type="text/css">
BODY
{
background: url(../pelle.jpg)
}
</style>
OBS!!! Nu ligger bilden pelle.jpg en mapp(våning) längre ner. Du kan självklart lägga bilden i samma mapp och skriver då koden :
<style type="text/css">
BODY
{
background: url(pelle.jpg)
}
</style>
Koden för hela sidan ser då ut så här:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
BODY
{
background: url(pelle.jpg) #99FFFF;
}
</style></head>
<body>
</body>
</html>
Som du ser kommer bilden flera gånger i bakgrunden och det beror på att vi inte givit några direktiv om den skall visas en eller flera gånger. Många lägger in en gradient eller övergående färg i bakgrunden med hjälp av en bild eller en linear-gradient i stylesheet. Linear-gradient fungerar tyvärr inte på samma sätt i all webbläsare ännu så därför tvingas du lägga in en rad för varje läsare. Om vi skall lägga in linear-gradient istället för pelle får vi göra så här: Lägg märke till #99FFFF; som är färgen bakom bilden om du skulle stöta på en webbläsare som inte läser bilder. #99FFFF är en lite klarare ljusblå färg som kan fungera här.
<style type="text/css">
BODY
{
background: -webkit-linear-gradient(white, blue); /* Safari */
background: -o-linear-gradient(white, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(white, blue); /* Standard syntax */
}
</style>
Vad vi gör här är att gå från vitt till blå. Hela koden för sidan blir alltså
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
BODY
{
background: -webkit-linear-gradient(white, blue); /* Safari */
background: -o-linear-gradient(white, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(white, blue); /* Standard syntax */
}
</style></head>
<body>
</body>
</html>
Se resultatet här>>> Du skall själv prova med olika färger. Du kan även använda hexidecimala koder. För grått fungerar #cccccc och blått #0000FF. Du kan även få dem att växla lite mellan blått och vitt genom att använda
<style type="text/css">
BODY
{
background: -webkit-linear-gradient(left top, white, blue); /* Safari */
background: -o-linear-gradient(bottom right, white, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, white, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, white, blue); /* Standard syntax */
}
</style>.
OBS!!! Denna sista fungerar inte på Internet Explorer.
Inte ens Microsofts kan få det att fungera. På sidan https://ie.microsoft.com/TEStdrive/Graphics/CSSGradientBackgroundMaker/Default.html får du tipset:
/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* IE10 Consumer Preview */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* Mozilla Firefox */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* Opera */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF)); /* Webkit (Safari/Chrome 10) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* Webkit (Chrome 11+) */
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%); /* W3C Markup, IE10 Release Preview */
Och det fungerar i alla webbläsare förutom Internet Explorer när du använder det i stylesheet för body. För att få gradient att fungera i Internet Explorer är du helt enkelt tvungen att lägga in en bild. Jag lägger in bilden https://www.gbghtml.se/bilder/ie.png och stylesheeten ser då ut så här:
<style type="text/css">
body
{
background:url(../ie.png) #FFFFFF; background-repeat: repeat-y;
}
</style>.
Lägg märke till background-repeat: repeat-y vilken gör att bilden repeater i y-led eller vertikalt. Här har jag även lagt till en bakgrundsfärg i form av vitt vilket gör att övergången från bilden till bakgrunden inte syns. Bilden kan du göra i photoshop, gimp eller något annat bildediteringsprogram och du använder gradient. Har du nu inte tillgång till något sådant kan du gärna använda bilden här och använder då koden
<style type="text/css">
body
{
background:url(https://www.gbghtml.se/bilder/ie.png) #FFFFFF; background-repeat: repeat-y;
}
</style>.
Förutom bilder i body-taggen kan du även använda dem till bakgrunder i tabeller. Vi går igenom detta på nästa sida.
freeimages.com har bilder eller foton du kan ladda ner gratis
Lägger här ut lite koder för dig som fastnat någonstans gällande bilder på webbsidan.
Enklaste sättet för dig att lägga ut en bild är
helt enkelt att lägga bilden i samma mapp som webbsidan. Du
kan då skriva adressen
till bilden bara med namnet. Om vi tar bilden pelle.jpg skriver du
<img src="pelle.jpg" width="100" height="100" alt="beskrivning
på
bilden"/> .
Ett av de enklare knepen för att lägga text runt bilden är
att använda kommandot "align" i img-taggen. Vill du
exempelvis att texten runt bilden skall finnas på vänster
sida använder du <img
src="pelle.jpg" width="100" height="100" alt="beskrivning
för bild" align="right" /> Och få då detta
utseende eller placering av bilden. 
Texten som vi skriver före hamnar
till vänster om bilden då vi angett align="right".
Vi gick igenom bilder på denna sidan i samband med p-taggen, och här i samband med bild från annan sida, här i samband med länkning plus här ihop med tabell.
På sidorna under bild hittar du lite användningsområden för bilder. Vi börjar med att lägga in en bild i body-taggen, sedan lägger vi även ut bilder i en tabell. På denna sidan är även några länkar till tips om photoshop. Som nog är det populäraste programmet just nu för att redigera bilder till hemsidan.
Innan du tittar här kan du ha nytta av lektionerna om tabell som du hittar på dessa sidorna.