Hvordan legge til bildebakgrunn til Squarespace Header
I denne bloggopplæringen lærer du hvordan du legger til et tilpasset bakgrunnsbilde til Squarespace-overskriften.
La oss dykke inn..
Se videoen
Sjekk ut YouTube-videoen nedenfor 👇
Det første trinnet er å legge til en bildeblokk og laste opp bildet du vil bruke som overskriftsbakgrunn. Dette er nødvendig fordi vi trenger en bilde-URL for at det skal fungere. Du kan ta bilde-URLen fra en annen nettside hvis du vil, men jeg anbefaler på det sterkeste å laste den opp til din egen nettside og få lenken på den måten. Dette sikrer at bildet ikke går i stykker.
Når bildet er lastet opp skal det se slik ut. Deretter går du til Custom CSS- delen av siden din og kopierer og limer inn følgende kode:
header#header {
bakgrunnsbilde: url();
bakgrunnsstørrelse: cover;
bakgrunnsposisjon: topp topp; // Endre dette til mach der du vil at bildet skal fokuseres på for eksempel center center | nederste knappen | øverst til venstre osv
bakgrunns-gjenta: ikke-gjenta;
}
Når koden er kopiert, klikk på lagre.
Derfra høyreklikker du på bildet du lastet opp tidligere og åpner det i en ny fane. Det skal da se omtrent ut som bildet nedenfor. Deretter kopierer du URL-en til bildet.
Innenfor parentesene URL() i koden limer du inn URL-en til bildet du vil legge til.
PROTIPS:
Du bør fjerne eventuelle formateringsparametere fra bilde-URLen, for eksempel ?format=…w. Dette er fordi disse parameterne kan påvirke bildets bredde og potensielt få det til å virke uskarpt.
For eksempel var den opprinnelige lenken til bildet mitt:
Men jeg fjernet alt etterpå .jpg, som resulterer i den siste lenken:
Dette sikrer at bildet vises i beste kvalitet uten unødvendig komprimering eller endring av størrelse.
Du kan også vite at du sletter bildeblokken vi lastet opp tidligere - og nå har du ditt eget bakgrunnsbilde på Header
Din designer
Jeg er Victor Rolf, en ekspert Squarespace-designer. Hvis du vil diskutere et potensielt prosjekt, kan du sende meg en e-post på victor@rolfmade.com eller ta kontakt her . Alternativt kan du sette opp en gratis 15-minutters konsultasjonssamtale her.
