Välkommen till whr.se, recensioner av webbhotell. I denna avdelning publicerar vi guider och artiklar runt webbteknik, programmering och marknadsföring på Internet bland annat.

Bakgrundsbilder med CSS

CSS slår verkligen (X)HTML när det kommer till bakgrundsbilder. Med CSS är du inte fast i upprepande mönster, och så har du möjlighet att positionera bakgrundsbilden vart du än vill. Du kan även applicera bakgrundsbilden till ett specifik element i dokumenten, och inte enbart till hela webbsidan.

Nu ska vi ta en titt på vilka inställningar är använda till att placera och positionera runt bakgrundsbilder, med början från enklaste ”background-image” property.

Lägga till bakgrundsbild

Background-image property används till för att lägga en bakgrund till ett element. Dess primära jobb är att ge exakt läge för bildfilen.

background-image
Values: URL (bildplats) /none/inherit
Default: none
Applies to: all elements
Inherits: none

Värdet background-image är en sort URL- behållare som håller bildens URL. URL relaterar till (X)HTML dokumentet där bilden ska in på, och inte stylesheet dokument.

Bakgrund i vårt första exempel är applicerad bakom hela webbsidan (body).

I body style lägger du ny regel:

background-image: url(cabbage_A.jpg);


Så. Klart. Nu har du lagd till bakgrundsbild.

Upprepa inte bakgrundsbilden

Har du möjligen stor bakgrundsbild och inte som i vårt exempel och vill att bilden inte ska upprepas utan endast visas en gång så skriver du bara till:

background-repeat: no-repeat;

Den ska in i body style, du kan lägga in det precis under

background-image: url(cabbage_A.jpg);

Du kan även begränsa bilden så att den enbart kopieras horisontellt (repeat-x) eller vertikalt (repeat-y). Använd inte det tillsammans annars saknar det betydelse.

background-repeat: repeat-x;
background-repeat: repeat-y;

Positionering av bakgrund

Har du en mindre bakgrundsbild som ska ligga på endast en specifik plats på webbsidan så kan du lägga till tidigare nämnda no-repeat kommandon och t.ex. background-position: left; vilket kommer då att positionera bakgrundsbilden högt upp på webbsidans högra kant.

Nu kan du med tidigare nämnda funktionen repeat-x dra ut på den lilla bakgrundsbilden så att den visas längst upp över hela sidan, men endast där uppe.

Bild ex.

Du kan nu använda background-position: och positionera bilden left, right bottom, bottom, center eller hur du vill. Bläddra upp för kodexempel.

Med en enkel kod som background-position: 200px 15px; kan du positionera bilden mycket mer specifikt, hur långt ner eller upp på webbsidan du vill ha den. Du kan även använda procentantal här istället för px. Ex. background-position: 100% 5%;


Kombinera bakgrundsfärg med bakgrundsbild

Nu skulle det vara smart om bakgrundsfärgen kombineras med bakgrundsbilden. Det gör vi därför i vårt exempel och tar nu ändrar bakgrundsfärgen genom att i body satyle lägga till background-color: BBE09F;


Det här blir resultatet.

Friställ bakgrundsbilen från webbsidan, gör den oberoende

Vad händer med bakgrundsbilden när användaren scrollar sidan? Ja, bakgrundsbilden följer vanligtvis med. Det kan i vissa fall vara snyggt att bakgrundsbilden inte påverkas när användaren scrollar sidan, bakgrundsbilden förblir densamma alltså oberoende av andra objekt på webbsidan.

background-attachment: fixed;


Publicerad 2011-01-11. Kategori Guider.


En kommentar

  1. Av Soya, maj 16, 2011 | Svara

    Hej,
    Jag håller på att bygga min första webbplats.
    Jag skulle vilja att bakgrundsbilden var fäst vid innehållet. Som det är nu täcker innehållet över relevanta delar av bakgrundsbilden på små skärmar men det ser bra ut på stora skärmar. Bilden är en naturbild med ett barn i övre vänstra hörnet. Jag skulle vilja att barnet i hörnet syns oavsett skärm, resten av bilden är mindre viktig.
    Finns det någon lösning för detta med css?

    Soya


Skriv en kommentar eller en fråga

This blog is kept spam free by WP-SpamFree.