Header Ads

Bakgrund som täcker alla skärmar



När man lägger till en bakgrund i Bloggers Malldesigner, oavsett om det är en egen bild eller en av deras kommer bilden att visas i sin ursprungsstorlek och det kan innebära att man på större skärmar ser kanten på bakgrunden.
Visserligen kan du välja att upprepa bilden men det är ju kanske inte så snyggt.
Bättre vore att kunna få den bild du valt att anpassa sig efter storleken på den skärm din besökare har.

Som tur är finns det enkel kod att lägga till för att få detta att fungera.
(Koden fungerar även på andra bloggplattformar, som blogg.se och wp)

Gör så här:


Gå till din bloggs Malldesigner.



Här väljer du Avancerat - Lägg till CSS.


I kodrutan lägger du till följande kod:

body {
background-size: 100% 100%;
}


För att din bild ska ligga still och inte rulla med sidan och för att den ska hamna rätt är det ett par inställningar du behöver se över innan du stänger Malldesignern ifall du har laddat upp en egen bild.

Gå till Bakgrund - Bakgrundsbild, där du laddade upp din bild och titta på alternativen för placering av bild.
Här ska du välja Justering (centrerad bild är bra men inte nödvändig), Rotera inte och kryssa ur rutan för Rulla med sida. Så här:



 Klicka på Använd i blogg uppe i högra hörnet för att spara.

Nu täcker den bakgrundsbild du valt hela skärmen, oavsett vilken storlek din besökare har.

Visst blir det skillnad:



7 kommentarer:

  1. Lade in koden,men...Ser ju inte detta själv :/
    Ser du hur om det ser bra/rätt ut?

    SvaraRadera
  2. Hej Fru Eriksson!
    Din bakgrundskod säger "no-repeat fixed top right" när jag kollar, så på något vis har det inte sparats som det ska. Tyvärr...

    SvaraRadera
  3. Aha,Anneli ...
    Men ser du hel bgr då? I ordinarie ;)

    I Test http://annmistestblogg.blogspot.se/
    med kodsnutt - Skillnad på dom?
    1000-Tack för din hjälp,snälla du!

    SvaraRadera
  4. Fru Eriksson, jag redigerar inlägget ovan, det är ett par inställningar för bakgrunden som man måste sätta rätt för att få koden att fungera som man vill. Jag hade dem redan som de skulle vara så jag missade att ta upp det i inlägget. ;-)

    SvaraRadera
  5. Ja...så har jag i Testbloggen som jag nu länkar till här men...
    Ser ju inte om det fungerar på stor skärm ;)

    SvaraRadera
  6. Det ser fint ut, kollade just :-) Stort och täcker bra!

    SvaraRadera
  7. TACK,snälla Anneli jag ville bara kolla p.g.a att min mall alltid trasslar ;)
    Då lägger jag in det i min vanliga & hoppas inte den trasslar hihi

    Ha det så gott!

    SvaraRadera

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------