Synes du dit websted har brug for noget lidt mere eksotisk end en ensfarvet baggrund?
Så er her nogle bud på, hvordan du kan gøre det mere spændende at se på.
Fastlåst baggrund
Normalt flytter baggrunden med op, når man scroller ned ad siden. Men det er også muligt at ‘låse’ baggrunden, så den bliver stående, mens resten bevæger sig.
Her er løsningen lavet med banner/cover, der er en del af en standard WP, men det ville også kunne laves med mange andre plugins. Og sikkert lettere. Men det kan altså også gøres uden at tilføje flere kalorier til dit websted.
Indsæt et banner og vælg et passende baggrundsbillede. Det skal selvfølgelig være stort nok, men samtidig være enkelt, så det fylder mindre med komprimering.
Du skal gøre to ting, for et få det til at fungere som på videoen herover:
- Lade det fylde sidens bredde
- Fastlåse baggrunden
Det første gøres ved at klikke på justeringsikonet og vælge Fuld bredde.
Det andet gøres ved at aktivere Fastlås baggrund i indstillinger for banner-blokken.
Hvis du vil have banneret til at være mere længere, end hvad indholdet fylder, så kan du angive en minimumshøjde under designindstillinger for blokken. Nederst under Dimensioner kan du angive den i VH, hvilket står for viewport height og er en procentdel. En værdi på 100 får altså banneret til at fylde en hel side uanset indhold.
Fastlåst baggrund i flere felter
En ekstra effekt kan du ved at bruge fastlåst baggrund flere felter på samme side.
Når du vælger Fastlåst baggrund, så skaleres billedet til at fylde hele siden – både i højde og bredde. Det betyder, at hvis du har flere felter på samme side, med samme billede som fastlåst baggrund, så vil de scrolle synkront!
Video i baggrunden
En video, der kører i baggrunden i toppen af en side kan skubbe kraftigt til lækkerheds-faktoren!
Videoen skal være uden lyd og det kræver lidt overvejelser, inden du vælger den løsning – men mere om det senere, for nu leger vi bare.
Du kan godt sætte en video ind i blokken banner/cover, men den bliver ikke afspillet … Ikke endnu, i hvert fald. Og så duer det selvfølgelig ikke.
Ja, altså sådan en almindelig en med hul i
Hvis du vil bestemme – eller kunne – lidt mere, så kan du installere et plugin. Der er flere muligheder, men jeg anbefaler Kadence Blocks. Pakken indeholder en del andre blokke også, men de øvrige vil kun påvirke dit websteds hastighed, når du bruger dem.
Installere plugin’et og åbn den side, du vil sætte baggrunden ind.
Du skal vælge blokken 
Row Layout, der i princippet bare er en udvidelse af kolonne-blokken. Den kan vanvittigt mange ting, men denne gang skal vi bare se på muligheden for at lægge en video i baggrunden.
Du skal først vælge antallet af kolonner i blokken. I eksemplet her har jeg bare valgt en enkelt, men der er masser af andre muligheder.
Under blokkens indstillinger skal du vælge fanen Style og opsætte det som vist her.
Du skal vælge ikonet for video først, herefter kan du vælge den specifikke video.
Der er både mulighed for at vælge videoer, der ligger lokalt eller indlejre/embedde videoer fra YouTube og Vimeo.
Hvis du vælger at indlejre, så husk at få styr på dine cookies. For begge tjenester vil tracke og derfor skal du have dine brugeres tilladelse, før du afspiller videoen. Så hvis det er muligt, bør du have dem lokalt på eget webhotel.
Vælg Mute video og Loop Video længere nede.
Dels har ingen lyst til at en baggrundsvideo pludselig begynder at spille musik, dels kan det give problemer for personer, der bruger hjælpemidler som oplæsning osv.
Du skal være opmærksom på, at selvom videoen kører som baggrund og er muted, så vil der stadig være browsere, der ikke vil afspille, medmindre man har godkendt brug af cookies.
Det er der bare ikke noget at gøre ved, men det gør det lidt vigtigt at overveje, hvad der vises, når den ikke afspilles.
Fixed baggrund med parallax effekt
Nogle plugins giver mulighed for at tilføje endnu en effekt til en fastlåst baggrund: Parallax.
Det betyder at baggrunden ikke længere er fastlåst, men bevæger sig med en anden hastighed end resten af siden, mens du scroller. Det er en ret fed effekt, der kan give et ekstra skud kreativitet.
Det kan gøres på mange måder – her med Kadence Blocks som nævnt tidligere – og det er forskelligt, hvor mange indstillingsmuligheder man har.
Farvet og flydende gradient som baggrund
En lidt speciel effekt, som måske ikke kan anvendes på alle websteder. Men hvis den bruges diskret kan give en rigtig flot effekt.
Og så er det en ægte letvægter! For det kan nemlig laves uden brug af andet end CSS.
Der bruges tre teknikker:
- linear-gradient til baggrund
- skalering af baggrund til 4x størrelse
- animering
Linear-gradient
Vi laver en baggrund med fire farver drejet lidt på skrå. Det gør vi ved at tildele background-image en speciel funktion: ikke et billede, men i stedet en linear-gradient.
Linear-gradient tager flere parametre og her går vi all-in og bruger dem alle.
background-image: linear-gradient(35deg, rgba(250,172,168,1) 3%, rgba(221,214,243,1) 38%, rgba(255,221,225,1) 68%, rgba(238, 205, 163, 1) 98%);Først en hældning på 315 grader og derefter definerer vi hele fire forskellige farver med rgba() og de får hver en placering angivet i procent. De fire farver er
rgba(250,172,168,1)
rgba(221,214,243,1)
rgba(255,221,225,1)
rgba(238, 205, 163, 1)
Skalering
For at kunne ‘flytte’ denne gradient, er den nødt til at være større end selve den synlige del af siden. Og samtidig skal vi lige have den til at blive stående samme sted, mens vi scroller, for ellers virker effekten ikke.
background-size: 400% 400%;
background-attachment: fixed;Animering
Først definerer vi selve vores animation og navngiver den. Her hedder den ganske enkelt “gradient”. Vi definerer tre keyframes og lader systemet selv lave alle de mellemliggende ‘billeder’.
Vi definerer start, midt og slutpunkter. Og da effekten kommer til at køre i loop, lader vi farveskiftet gå frem og tilbage: fra øverst til venstre (angivet som 0% 0%) til nederst til højre (100% 100%) og tilbage igen (0% 0%).
@keyframes gradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}Vi tildeler nu denne animation til vores baggrund, opsætter en tidsperiode for effekten og beder den om at køre i loop for evigt.
animation: gradient 15s ease infinite;Det hele sættes sammen
Det var stort set det, nu mangler vi bare at samle de forskellige dele:
body {
margin: auto;
overflow: auto;
background-image: linear-gradient(315deg, rgba(250,172,168,1) 3%, rgba(221,214,243,1) 38%, rgba(255,221,225,1) 68%, rgba(238, 205, 163, 1) 98%);
animation: gradient 15s ease infinite;
background-size: 400% 400%;
background-attachment: fixed;
}
@keyframes gradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}Og hvis man ser effekten på en en færdig side, så kunne det for eksempel se sådan her ud:
