Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Panoramaheader – bred header till blogg

Om du vill veta hur man designar responsivt för att det ska se lika bra ut på alla enheter, så ska du kolla på denna film!

Det första du börjar med att göra det är att du lägger headern utanför wrappern, annars så kommer det här inte fungera. Du flyttar alltså ditt headerstycket i kodmallarna till ovanför wrappern. Se bild nedan.

Skärmavbild 2014-10-29 kl. 13.36.10

Det du gör därefter är att du går in i din stilmall och scrollar till #header och där ska du se till att det står något sådant här efter background (alltså som värde).

background: url(dinbildhär) no-repeat center center fixed; 

Det viktiga i ovan kod är att du har no-repeat om du inte vill att bilden ska upprepas, center center kan bytas mot till exempel top center, top left, center left – ja, ni fattar säkert, men se även till att den är fixed.

Under detta, men fortfarande i deklarationen för #header, lägger du till följande:

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

Sedan är det färdigt, bortsett från modifiering! Det du kan behöva göra är som sagt att justera positionen på din header, så att den ligger där du vill ha den, och även höjden (height). Du måste också se till att din bild är såpass stor att den kan täcka hela sidan för alla enheter (den här koden är inte responsiv, så antingen får du göra ett responsivt avsnitt som visar hur det ska se ut i surfplatta eller mobil, eller så kommer din header synas lite grann i en surfplatta/mobil, det är upp till dig helt enkelt!) och därmed kan du inte ladda upp den på blogg.se till exempel, då de bara tillåter bilder som är max 1000px breda för att undvika stora uppladdningar. Tips är att ladda upp på till exempel Tumblr eller Tinypic.

Transkribering av film:

Hur du gör en panoramaheader

Hej allihopa.

Idag så hade jag fått en liten fråga från en tjej om inte jag kunde visa, eller om vi här på Designa din Blogg kunde visa hur man gör en panoramaheader. En panoramaheader är en bred header som sträcker sig över hela sidan och då så väljer man inte att sätta en specifik bredd på den utan den visar över hela sidan på alla bloggar, eller på alla skärmar.

Det enda man behöver tänka på det är att man har en bild som täcker hela sidan för den stretchas inte ut och blir större än vad den är. Det betyder också att man måste ladda upp den på en annan hosting-site än blogg.se igenom att deras största format på bilder är 1000 pixlar i bredd men vi behöver ju kanske 2000 pixlar för riktigt, riktigt stora skärmar och då om man inte tycker att det blir bra liksom att ha en sådan stor bild så får man använda Media Queries som jag kan länka nedanför denna filmen, men vi går inte igenom det här utan det går vi igenom i den filmen där och då får man liksom anpassa headern utefter hur, hur stor skärmen är så att om man till exempel har en mobilskärm så kör man på bredden 480 pixlar istället för kanske 2000 pixlar som man kör på en full screen.

Men det lär man sig mer om i den responsiva filmen så att är man väldigt mån om att det ska se bra ut på alla skärmar så är det den responsiva filmen som man ska kolla på. Men i alla fall nu ska jag förklara hur man gör en panoramaheader och det är faktiskt väldigt enkelt om jag får säga det själv. Då är det som så att man går in i stilmallen och i stilmallen så lägger man in, ska vi se så får jag logga in här för Chrome är väldigt långsamt när jag spelar in film, i vilket fall ska vi göra detta på testblogg så vi kör på den. Nu är det som så att jag har redan lagt in detta för att jag var tvungen att testa först att det fungerar. Men som ni ser så täcker inte den här bilden hela sidan och det är det som jag tänkte att vi skulle fixa då. Så jag visar här lite snabbt igen att ni ser att den går bara hela vägen ut hit men vi vill liksom att den ska gå kant till kant här utan att vi har som sagt en specifik pixel, ett specifikt pixel antal.

Det är som sagt lite enkel css men det man börjar med det är att man letar upp div id header, den brukar ligga under wrapper och så tar man div id header och /div som är under, klipper man ut det och lägger det ovanför wrapper för annars så kommer headern bara att finnas inom wrapper och en wrapper då är satt till kanske 1000 pixlar, då kan inte den här oavsett css:en bli större än 1000 pixlar. Men vi vill ju att den ska täcka hela sidan alltså hela body på bredden och därför så lägger vi den direkt efter body om man nu inte har någon, om man inte har någon meny eller någonting som är tidigare eller sådär, men det bästa är att lägga den efter body och så lägger man menyn i så fall efter wrapper och så får man liksom justera menyn i fall det är så att menyn hoppar ner. Så, så sparar vi där och sen så går man in i stilmallen och bläddrar ner till header och då har vi ju en background där och jag brukar lägga transparant på bakgrunden och sen så lägger man in sin bild och nu har ju jag lagt en bild som är för liten och då gör jag som så att jag bara laddar upp en riktigt stor bild så att ni får se liksom vad det är, vad det är man gör. Och så får ni själva liksom matcha in bilden och så där. Men det bästa är ju att ta en bild som, som är stor och sen så använda Media Queries för att göra det responsivt så att det ser bra ut på alla skärmar. Så jag tar en stor bild här och så ska vi fylla i lite Captcha och det är lite pop-ups och grejer. Då ska vi se. Och sedan efter där som ni ser, nedan i koderna så är det no repeat och det är alltså om man inte vill att bilden ska upprepa sig. Sen är det center center men jag har valt att sätta top center istället och det betyder att den lägger sig kant i kant med toppen men den lägger sig också i mitten. Här kan man till exempel lägga left center och då lägger den sig längst till vänster. Man kan även lägga right center men i och med att detta är en, en header som ska ligga i mitten fast högst upp kant i kant. Eller jag tror att det är det som folk vill annars så kan man ju lägga left center eller så lägger man center center det betyder man, det gör man som man vill.

Sen så har man en fixed där också så det är no repeat, left center, fixed eller no repeat, center center, fixed. Det bestämmer man själv. Och sedan så får man justera heighten så att den är så pass stor som man vill ha och så ser man till att man inte har någon bredd på den här utan det sköter vi med ett annat css avsnitt. Då ska vi se hur det går med min bild. Där var den, så då tar vi den och så klistrar vi in den här. Så. Spara. Då ska vi se hur det blev. Problemet när man har en, en stor bild det är ju att den tar lång tid att tanka, men det får man ju liksom överväga själv hur stor bild man vill ha då. Man kan ju till exempel spara den i ett format som inte tar så stor plats som jpeg eller så. Och så får man ju justera den här och klippa och klistra och göra den högre eller mindre eller vad man vill. Jag kanske vill ha den på 463 istället för 363 och sen så tar man också det andra stycket som är här nedanför där det är background size cover och då är det också webkit moz o och det betyder att det här fungerar för det här är ny css, det är ju css 3 och då behöver man också visa att det ska fungera i Internet Explorer och Mozilla Firefox och så Chrome och att allting fungerar där också. Så att ni tar hela den här och så klistrar ni in den någonstans under header. Det spelar ingen roll om det är högst upp eller om det är längst ner bara det är inom klamrarna liksom. Då ska vi se om den blev lite större här. Då ser ni, då blev den lite större där. Det var kort och gott det vi hade att visa idag, så får ni ha en fortsatt trevlig dag. Hej hej.

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

25 comments

  1. SvaraLinnea Olsson

    Tack!
    Fantastiskt hur snabbt jag fick svar från dig också. Otroligt hjälpsamt Sanna, tack tack tack! ♡ Ska prova detta nu i helgen 🙂

    1. SvaraLinnéa Olsson

      Testade det nu lite senare istället haha 🙂 Det enda problemet jag har är att bilden är för stor.. Har laddat upp en stor bild så den ska passa på alla enheter men nu syns inte hela bilden. Är det för att jag behöver anpassa den responsivt nu?
      mylifeaslinnea.blogg.se/nydesign


      1. Author
        Sanna Preifelt

        Bredden på bilden för vara 1980px, därefter får du göra som du vill 🙂

  2. SvaraCharlie Gong

    Hej! Jag testade detta och det funkar, förutom att det blir en marginal längst upp som jag inte lyckas få bort. Använde då temat essential och det ser ut såhär:
    Sen testade jag ett PRO-tema som redan hade en panoramaheader och det blev ÄNDÅ en marginal. Är det något jättedumt jag missat eller är det bara min skärm som visar den så? Testblogg nr 2:

      1. Charlie Gong

        Hm. Jag såg ingen sån när jag kopplade bort adblocker. Hur som helst testade jag att ha -10px på den övre marginalen och det funkade!

  3. SvaraGustav Danielsson

    Hej, till att börja med vill jag bara säga att din film har hjälp mig mycket. Har dock ett litet problem med hur headern skalar sig på olika skärmar. Finns det något sätt att förbestämma hur headern blir på olika skärmstorlekar? För ju större skärmen är desto mer inzoomad blir bilden, beror detta på något jag har gjort eller är det något man måste ställa in?

    //Gustav

  4. SvaraKajsa Roman

    Hej! Tack för otroligt snabbt svar sist!
    Jag har en annan fråga ang. header.
    Om man har en bild som är större än höjden där själva headern ska sitta, kan jag ändra det på något sett? Alltså så att hela bilden går in, för den går inte riktigt att klippa. Då förstörs liksom bilden.

    Tack på förhand,
    Kajsa


    1. Author
      SvaraSanna Preifelt

      Absolut, gå till stilmallen, leta upp #header och lägg in height: 500px; eller något liknande, du får ändra siffra själv till vad som blir bäst.

  5. SvaraTherese Gustavsson

    Vet att jag tjatar om det här men vill fortfarande kunna ha en panorama header som Nevnarien med temat Whimsical. Kan hon så kan jag tänker jag haha 😉 Och provade lite i testbloggen och fick faktiskt headern att sitta där den ska, dock så är den gigantisk och anpassar sig inte till dator skärmen direkt.. Kanske har du något knep att fixa det? Jag satte jag den inte ovanför Wrapper’n eftersom då menyn också hamnade under headern, kan det vara det som förstör trots allt? :/

    Mvh Therese


    1. Author
      SvaraSanna Preifelt

      Använd % när du anger width, då skalar den sig efter upplösningen.
      Nevnarien har inte använt Whimsical, så det är ju inte samma sak, och hon har heller inte gjort på samma vis som du har gjort, utan hon har gjort på samma sätt som vi visat i vårt tips.

      1. Therese Gustavsson

        Okej skriver jag: width: 100%; då?
        Hon skrev det till mig i en kommentar, “Temat heter Whimsical, men jag har ändrat i det..” 🙂
        Jag har försökt att följa ert tips så mycket som möjligt, men som sagt när jag la headern utanför wrappern la den sig högst upp och menyn hamnade under vilket såg sådär ut.


      2. Author
        Sanna Preifelt

        Okej men prova att använda tipset utan att lägga den utanför wrapper och justera Margin på CSS:en.

  6. SvaraTherese Gustavsson

    Headern är fortfarande jättestor så det är svårt att se om jag behöver flytta den med margin.
    Har jag skrivit koden fe kanskel? 😮


    1. Author
      SvaraSanna Preifelt

      Du måste använda tipset som vi har skrivit här, du har gjort något helt annat på din blogg.

  7. Svarasandra westerling

    Hej du som verkar kunna allt, haha! Jag har pro och använder mej av temat home sweet home. Jag har fyra bilder i headern men vill mkt hellre ha en stor bild. Jag lyckas inte hur jag än gör. Måste jag kopiera hela koden för stilmallen och fixa massa själv för att det ska funka eller finns det något sätt att bara få in en stor bild utan att ta bort importen av hela temat?
    Skulle bli så glad om jag kunde få hjälp så det funkade.
    TACK!!!

    1. SvaraFredrik Le Falk

      Hej Lisa,

      du har definierat storlek (width) på bilden i din CSS-kod och även lagt till margin-left.
      Kolla din stilmall–> #Header och prova att ändra/ta bort dessa.

      1. Fredrik Le Falk

        Bra! Då ska det funka, men jag ser däremot att din bild är för liten. Har du en mindre skärm täcker den hela, men sitter du med en större skärm krävs det en större bild. Se till att ha en bild som är åtminstone 1400 pixlar bred (helst 2000 pixlar om någon har stor skärm).

  8. SvaraAlice

    Hej allihopa på ddb! Jag har en lite fråga till er. Jag skulle vilja ha en bloggdesign som ser ut lite som blondinbellas eller tyras.se blogg. Alltså en panorama header men inte så ni visset här, och sedan den delen längst upp och så menyn under hedern också. Hade varit super snällt om ni vissate hur man gör en sådan header som dom har plus den ovandelen 🙂 Resten klarar jag nog av själv.

    tack på förhand 🙂

  9. SvaraEdla

    Detta verkar inte fungera för mig. har testat att byta header-bild med olika storlekar, men det fungerar inte. Men när jag går in i en annan webbläsare så fungerar det. Kan detta bero på att jag har google chrome eller har jag gjort något fel?

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *