35 besökare online
Drömvävaren webbshop
12 kunder online

webdesign och HTML

« Bilder | Sidmarginaler  »

Bakgrundsbilder

Bakgrundsbilder repeteras till höger och nedåt som standard och när den repeteras så skapar den ett mönster med synliga skarvar. Du ange om, och hur, bilden ska upprepas och även en exakt position för bilden.
Läs mer om egenskaper för bakgrundsbilden i guiden CSS grunder »

  1. Använd dokumentet "sida2.html" som du sparade tidigare enligt guiden Bilder »

    Använd din egen bild eller bilden som vi använder i exemplet. Högerklicka på bilden nedan och spara den i samma mapp som ditt HTML-dokument:

    bakgrund2.gif


  2. OBS! Det är viktigt att du använder VERSALER och gemener korrekt när du anger sökvägar till bilder eller andra dokument. Om du anger bildens namn i HTML-koden till "bakgrund2.GIF" när bildfilen heter "bakgrund2.gif" kan detta innebära att bilden inte visas alls.

    En bra regel är att använda gemener (små bokstäver) och att inte använda mellanslag i filnamn och sökvägar.
    Bildnamnet "semester_i_smogen_2006.jpg" bättre än namnet "Semester i Smögen 2006.jpg".

    I vårt exempel är bilden sparad i samma mapp som HTML-dokumenten:



    Bakgrundsbild och andra egenskaper anges som en "stil" (style) och använder CSS (Cascading Style Sheet).
    När du är klar med HTML-grunderna bör du gå vidare och läsa guiderna om CSS »

    CSS-formatet anges inom märket <STYLE>där formatet för varje märke anges inom block omslutna med måsvingar eller "krullparenteser" { }

    Formatet anges med selektorer som anger vad som ska formateras. I vårt exempel är det <BODY> som är selektor och ska ha egenskapen för bakgrundsfärg.

    Selektorer och format anges inom kommentarsstecken <!-- -->

    I exemplet nedan anges att <BODY> ska CSS-formateras för bakgrundsbild. Inom samma selektor finns redan formateringen för teckensnitt (font).

    Ange CSS-koden för background-image enligt nedan:

    <title>Sidan 2</title>
    <style type="text/css">
    <!--
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-image: url(bakgrund2.gif);
    }
    -->
    </style>
    </head>
    <body>

    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:



    Bakgrundsbilder repeteras till höger och nedåt som standard. Bakgrundsbilden i vårt exempel är en "mönsterplatta" (tile) och när den repeteras så skapar den ett mönster utan synliga skarvar.

    Om du använder en "vanlig" bild som inte är anpassad för ett mönster så kan det se ut så här:



    Du ange om, och hur, bilden ska upprepas och även en exakt position för bilden.

    Läs mer om egenskaper för bakgrundsbilden i guiden CSS grunder »

  3. Använd egenskapen background-repeatför att ange att bakgrundsbilden endast ska repeteras nedåt.

    I exemplet nedan anges att bakgrundsbilden endast ska repeteras i Y-led :

    <title>Sidan 2</title>
    <style type="text/css">
    <!--
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-image: url(bakgrund2.gif);
    background-repeat: repeat-y
    }
    -->
    </style>
    </head>
    <body>

    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:



  4. Prova en annan typ av bakgrundsbild som är övertonad mot vit färg i högerkant och nederkant.

    Högerklicka på bilden nedan och spara den i samma mapp som ditt HTML-dokument:

    bakgrund1.jpg


    Ändra i koden och byt ut den bakgrundsbild du använde tidigare.

    Låt den nya bilden justeras enligt standard ( ta bort egenskapen background-repeat):

    <title>Sidan 2</title>
    <style type="text/css">
    <!--
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-image: url(bakgrund1.jpg);
    }
    -->
    </style>
    </head>
    <body>


    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:



    Bakgrundsbilder repeteras till höger och nedåt som standard. När bakgrundsbilden i vårt exempel repeteras så skapar den ett mönster med synliga skarvar.

  5. Ange att bakgrundsbilden inte ska upprepas genom att ange egenskapen background-repeat: no-repeat
    Ange att bilden inte ska scrollas med sidinnehållet, med egenskapen background-attachment: fixed enligt nedan:

    <title>Sidan 2</title>
    <style type="text/css">
    <!--
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-image: url(bakgrund1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    -->
    </style>
    </head>
    <body>


    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

 

Nästa guide: Sidmarginaler »