CSS og background billeder som blikfang


På opfordring fra Thomas, kommer lige endnu et indlæg i CSS genren.

Det handler om at sætte noget grafik ind som blikfang, eller “Call to action” som det så fint hedder i denne branche. Her på bloggen har jeg gjort det i øverste højre hjørne, ved min Google+ knap.

Jeg har lavet et stykke grafik, med teksten “Google Plus” og så en pil der peger på det område som jeg gerne vil have mine besøgende til at se.

Jeg har gjort det samme på Udlejerbasen.dk, hvor det er på de enkelte annoncer, og der er det “Kontakt udlejer” jeg skal have brugerne til at se.

Der er nu ikke så meget hokus pokus i det, men Thomas spurgte mig som sagt om ikke jeg kunne lave en guide til hvordan man gjorde det, so here goes..

Indsæt Call to action grafik med CSS

Når man sætter grafik ind som jeg gør det her, kan man ikke lave links på grafikken. Denne tutorial er altså for dem der gerne vil have grafikken ind som blikfang, og til at henlede opmærksomheden på et bestem område.

Først skal vi finde den rette DIV vi skal lege med. Her har jeg brugt #header, som så således ud:

#header {
    padding: 10px 0 0 0;
}

Jeg har så lavet mit grafik, uploadet det til serveren, og tilføjet disse to linier:

background: url(images/google-plus.png) no-repeat;
background-position: 836px 50px;

Så min #header ser nu således ud:

#header {
    padding: 10px 0 0 0;
    background: url(images/google-plus.png) no-repeat;
    background-position: 836px 50px;
}

Forklaringen

Første linie indsætter billedet, og no-repeat, sørger for at billedet kun vises en gang, og ikke ligger sig som “fliser” ved siden af hinanden.

I næste linie definere jeg placeringen af billedet. Dette er helt afhængig af størrelsen på billedet, samt hvilken DIV den indsættes i osv, men i mit tilfælde passede det med at billedet skulle flyttes 836px ind mod højre, samt 50px ned fra toppen.

Du kan blive lidt klogere på CSS, og background position her

Så det er bare at lave et stykke grafik, og så prøve dig lidt frem.

Lars Bachmann

Iværksætter og Online nørd. Arbejder med WordPress og online markedsføring i min virksomhed Conseo.

Prøv lige at se disse indlæg også!

5 kommentarer til CSS og background billeder som blikfang

  1. Thomas siger:

    Fedt …. det skal jeg lige rode lidt med ….

  2. Lars Bachmann siger:

    Super.. Du roder bare løs 🙂

  3. Tak Lars, så kan det vist ikke gøres nemmere.

    Nu skal der sættes Call to action nogle steder 🙂

  4. Andreas Linde siger:

    Du linker til W3Schools til sidst i indlægget. W3Schools deler vandene (se f.eks. her http://w3fools.com/. Hvad er din mening om W3Schools? Bruger du dem, når du skal holde dig opdateret (eller lære nyt) indenfor kodning? Deres guides er meget udførlige, men man vil helst ikke bruge en masser energi på at lære noget, som er forkert.

  5. Lars Bachmann siger:

    Jeg bruger stort set ikke W3Schools,men har godt fuldt lidt med i debatten.
    Jeg plejer at google når jeg har et konkret problem, og sommetider er det W3Schools der kommer frem, og de løser som regel problemet, lige så godt som andre sites.

    Jeg er desværre ikke så god til at fordybe mig i artikler om kode/css, men burde gøre det en gang i mellem for at udvide min horisont 🙂

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *