Voeg achtergrondafbeeldingen toe en pas ze aan voor de gedeelten van je pagina.

Er zijn verschillende manieren om de achtergrond van je site vorm te geven. Een optie is om achtergrondafbeeldingen toe te voegen aan paginagedeelten en deze afbeeldingen aan te passen met een verscheidenheid aan beeldeffecten. Dit is een uitstekende manier om paginabanners en opvallende visuele elementen te creëren die bij je merk passen.

In deze gids wordt besproken hoe je foto's en andere achtergrondafbeeldingen die je naar Squarespace uploadt, kunt toevoegen en aanpassen. Lees verder over al je achtergrondstijlopties in Je siteachtergrond stijlen.

Deze gids is voor versie 7.1. Als je site draait op versie 7.0, kun je bannerafbeeldingen en achtergrondvideo's toevoegen voor vergelijkbare effecten, afhankelijk van je sjabloon.

Een video kijken

Voordat je begint

• Automatische lay-outs, portfoliogedeelten en alle blokgedeelten ondersteunen het toevoegen van achtergrondafbeeldingen. Je kunt ook achtergrondvideo's en achtergrondcreaties toevoegen aan deze gedeelten.
• Het is niet mogelijk om achtergrondafbeeldingen toe te voegen aan galeriegedeelten, maar je kunt wel een achtergrondkleur toevoegen, of de lay-out diavoorstelling: volledig gebruiken voor een vergelijkbaar effect.
• De gedeelten blog, cursus, evenement, winkel en video ondersteunen geen achtergrondinhoud, maar je kunt wel een achtergrondkleur toevoegen.
• Als je gedeelte tekst of andere content bevat, zorg er dan voor dat deze zichtbaar en leesbaar is tegen de achtergrond. Om de tekstkleur te wijzigen, gebruik je de lettertype-aanpassingen in het kleurenthema van dat gedeelte.
• Achtergrondafbeeldingen worden automatisch bijgesneden op basis van de hoeveelheid content in het gedeelte en de grootte van het browserscherm van de bezoeker. Gebruik een afbeeldingblok om te kiezen hoe een afbeelding wordt bijgesneden. Raadpleeg Hoe wordt mijn site op mobiele apparaten weergegeven? om te zien hoe achtergrondafbeeldingen op mobiele apparaten worden weergegeven.

Tips voor het opmaken van afbeeldingen

Controleer de opmaak van je afbeeldingen voordat je ze uploadt naar je site. Volg voor achtergrondafbeeldingen deze richtlijnen:

• Gebruik afbeeldingen met een breedte tussen de 1500 en 2500 pixels.
• Gebruik geen afbeeldingen met tekst in het afbeeldingsbestand zelf. Voeg in plaats daarvan tekst over de afbeelding toe.
• Als je tekst over de afbeelding wilt plaatsen, gebruik dan een afbeelding met een abstract patroon.
• Zie Afbeeldingen opmaken voor het web voor afbeeldingsbestandstypen en volledige afbeeldingsvereisten.

Achtergrondafbeeldingen toevoegen

Gebruik een achtergrondafbeelding om contrast te creëren met tekst of andere content die over het gedeelte heen ligt, of maak een banner wanneer het gedeelte bovenaan de pagina staat.

Voeg als volgt een achtergrondafbeelding toe aan een gedeelte:

1. Open het pagina's-paneel en klik op de pagina met het gedeelte dat je wilt bewerken.
2. Klik in de linkerbovenhoek op bewerken.
3. Zweef over het gedeelte, klik op het potloodpictogram en vervolgens op achtergrond.
4. Klik op afbeelding en vervolgens op +. Kies een afbeeldingsbron uit het uitklapmenu om een afbeelding te uploaden, een eerder geüploade afbeelding opnieuw te gebruiken, een stock-afbeelding te gebruiken of een stockachtergrond te gebruiken.
5. (Optioneel) Klik op afbeeldingseffect om een afbeeldingseffect te selecteren.
6. (Optioneel) Stijl de afbeelding met achtergrondbreedte en overlay-opaciteit.
7. (Optioneel) Klik op opmaak om de hoogte van het gedeelte, de contentbreedte en -uitlijning te wijzigen.
8. (Optioneel) Klik op kleuren om een kleurenthema te selecteren voor de overlay en de toegevoegde content. Zie kleuren wijzigen voor meer informatie. Als je de afbeelding verwijdert, wordt de overlay de achtergrondkleur van het gedeelte.
9. Klik op opslaan om je wijzigingen op te slaan en verder te gaan met bewerken, of klik op afsluiten en vervolgens op opslaan om de editor te sluiten.

Na het toevoegen van een afbeelding kun je:

• Tekst of andere content toevoegten over de afbeelding
• De afbeelding stijlen
• Afbeeldingseffecten toevoegen
• De afbeelding bewerken
• Het focuspunt van de afbeelding instellen
• De afbeelding wijzigen door op vervangen te klikken
• De afbeelding verwijderen

Tekst of andere content toevoegen

Je kunt tekst of andere content toevoegen over een achtergrondafbeelding. Omdat de tekst die je toevoegt zich aanpast aan elke schermgrootte of mobiel apparaat, is dit een uitstekende manier om tekst toe te voegen als je de achtergrondafbeelding als banner gebruikt.

Tip: Als je bovenaan je site een bericht wilt weergeven dat alleen uit tekst bestaat, voeg dan een aankondigingsbalk toe in plaats van een banner.

We raden het gebruik van een achtergrondafbeelding met tekst in het afbeeldingsbestand zelf om een aantal redenen af:

• Computers kunnen deze tekst niet lezen; zoekmachines zullen deze dus niet indexeren voor resultaten.
• Als je afbeelding van masker verandert om zich aan te passen aan verschillende browserbreedten, worden delen van de tekst bijgesneden.

Voeg als volgt tekst of andere content toe:

1. Klik op bewerken op de pagina met de achtergrondafbeelding.
2. Klik op blok toevoegen of op een invoegpunt om een tekstblok toe te voegen. Klik in het blok om tekst toe te voegen en gebruik vervolgens het uitklapmenu opmaak om een alineastijl te kiezen.
3. Voeg meer tekstblokken of andere content toe aan het gedeelte (zoals een knoppenblok).
4. Klik op opslaan om je wijzigingen op te slaan en verder te gaan met bewerken, of klik op afsluiten en vervolgens op opslaan om de editor te sluiten.

Tekststijlen

De stijlinstellingen van je site in het ontwerppaneel bepalen hoe tekst wordt weergegeven op je achtergrondafbeelding.

• Om de lettertypen van je site te wijzigen, kies je een lettertypepakket en basisgrootte in het lettertypenpaneel. Scroll naar stijlen toewijzen om specifieke tekst te stijlen. Zie Lettertypen wijzigen voor meer informatie.
• Om de kleur van je lettertype te veranderen, kies je een palet en thema in het kleurenpaneel. Klik op het potloodpictogram op het thema van je gedeelte om specifieke elementen binnen dat thema te stijlen. Zie Kleuren wijzigen voor meer informatie.

Een video kijken

Achtergrondafbeeldingen stijlen

Om de achtergrondafbeelding te bewerken, klik je op bewerken op de pagina, vervolgens op het potloodpictogram in het gedeelte van de banner en tot slot op achtergrond. Je kunt de achtergrondbreedte en de overlay-opaciteit instellen.

Achtergrondbreedte

Voor achtergrondbreedte:

• Schermbreed breidt de afbeelding uit van de ene rand van je browservenster naar de andere en beslaat de breedte van je site. Dit is meestal de instelling die wordt gebruikt voor bannerafbeeldingen.
• Ingesprongen laat de afbeelding iets inspringen en creëert een rand rond de afbeelding.

Wanneer de afbeelding is ingesteld op ingesprongen, kun je de randkleur instellen.

Overlay-opaciteit

Overlay-opaciteit stelt de ondoorzichtigheid in van de kleur-overlay van je achtergrondafbeelding.

Er is niet een juiste hoeveelheid ondoorzichtigheid en we raden aan om verschillende instellingen uit te proberen om te ontdekken wat voor jou het beste werkt. Over het algemeen raden we een hoger percentage aan als het gedeelte veel content heeft, omdat dat kan helpen om de content te onderscheiden van de achtergrondafbeelding.

De kleur van de ondoorzichtigheid wordt ingesteld door de aanpassing achtergrond-overlay in het thema van je gedeelte. Zie kleuren wijzigen voor meer informatie.

Opmerking: Als je een .png-bestand uploadt met een transparante achtergrond, toont de browser altijd een witte achtergrond achter de afbeelding. Om deze achtergrondkleur te wijzigen, moet je de afbeelding bewerken in bewerkingssoftware van derden voordat je deze naar je site uploadt.

Grootte van achtergrondafbeeldingen aanpassen

Wijzig als volgt de hoogte van een achtergrondafbeelding:

1. Klik op bewerken op de pagina en vervolgens op het potloodpictogram in het gedeelte van de achtergrondafbeelding.
2. Selecteer op het tabblad opmaak, onder hoogte van gedeelte, een vooraf ingestelde hoogte of klik op … om een aangepaste hoogte in te stellen. Als je een Fluid Engine-gedeelte bewerkt, kun je de hoogte van het raster van het gedeelte wijzigen door op het blauwe pijlpictogram in de rechteronderhoek te klikken en te slepen.
3. Klik op opslaan om je wijzigingen op te slaan en verder te gaan met bewerken, of klik op afsluiten en vervolgens op opslaan om de editor te sluiten.

De hoogte van het gedeelte beïnvloedt hoe de achtergrondafbeelding wordt bijgesneden op zowel computers als mobiele apparaten. We raden aan om verschillende hoogtes uit te proberen om het gewenste resultaat te bereiken.

In de klassieke editor-gedeelten hangt de hoogte van de achtergrondafbeelding ook af van de hoeveelheid content in het gedeelte. Voeg afstandsblokken toe om de hoogte te vergroten zonder zichtbare content toe te voegen.

Hoewel achtergrondafbeeldingen doorgaans de breedte van de site beslaan, kun je de achtergrondafbeelding stijlen om er een rand omheen te plaatsen. Hierdoor lijkt de breedte van de afbeelding te worden verkleind.

Achtergrondafbeeldingseffecten toevoegen

Nadat je een achtergrondafbeelding hebt toegevoegd, kun je effecten toevoegen om de afbeelding een gestileerdere uitstraling te geven. Sommige effecten voegen een animatie toe waardoor de afbeelding constant in beweging is, terwijl andere effecten pas verschijnen wanneer de bezoeker door dat gedeelte van je site scrolt.

Voeg als volgt een afbeeldingseffect toe:

1. Nadat je een achtergrondafbeelding hebt toegevoegd in de gedeelte-editor, klik je in het tabblad achtergrond op afbeeldingseffect .
2. Kies een effect uit het menu. Om het effect aan te passen, klik je op het instellingenpictogram om het detailpaneel te openen. Alle wijzigingen die je in het effect aanbrengt, verschijnen in de voorvertoning van je site. Zie het gedeelte hieronder voor meer informatie over je opties.
3. Klik op opslaan om je wijzigingen op te slaan en verder te gaan met bewerken, of klik op afsluiten en vervolgens op opslaan om de editor te sluiten.

Houd rekening met het volgende:

• Afbeeldingseffecten verschijnen alleen op browsers en apparaten die ondersteuning bieden voor WebGL, een tool die werkt met de grafische processor van je apparaat. Zie get.webgl.org om te testen of je browser dit ondersteunt. Als een browser WebGL niet ondersteunt, blijft de achtergrond van het gedeelte statisch.
• Afbeeldingseffecten zijn niet van toepassing op achtergrondcreaties of achtergrondvideo's, zelfs niet als de video een mobiele fallbackafbeelding gebruikt.

Stijlen voor afbeeldingseffecten

Je kunt kiezen uit de volgende afbeeldingseffecten:

• Geen – Geen effect, afgezien van de instelling van de transparantie van de overlay
• Vloeistof - geeft de afbeelding een rimpelend effect
• Filmkorrel – voegt een geanimeerde statische overlay toe aan de afbeelding
• Parallax - Het beeld beweegt als bezoekers scrollen
• Gebroken lichtcirkels - Breekt het beeld door een patroon van cirkels
• Gebroken lichtlijnen - Breekt het beeld door een patroon van rechte lijnen

Je kunt je afbeeldingseffect aanpassen in het detailpaneel. Om het detailpaneel te openen, klik je op een afbeeldingseffect en vervolgens op het instellingenpictogram.

Scroll door de opties en instellingen totdat je een patroon vindt dat je bevalt. Klik op een categorie om het uitklapmenu uit te klappen en meer opties te tonen. Afhankelijk van het type afbeeldingseffect ontstaan er verschillende categorieën.

Je kunt bijvoorbeeld:

• De grootte en het masker van het effect bewerken.
• De snelheid en richting van effecten met beweging bewerken, zoals Liquid.

Andere instellingen zijn uniek voor elk afbeeldingseffect en omvatten schuifregelaars en schakelaars die de kernelementen van het effect aanpassen. Om te experimenteren met een willekeurige mix van instellingen, klik je op het shufflepictogram bij het kiezen van een effect of klik je op willekeurig in het detailpaneel van het effect.

We raden aan elk effect te testen om een beter gevoel te krijgen van hoe het eruit ziet en hoe het werkt voor jouw site.

Hier is een voorbeeld van een achtergrondafbeelding van een gedeelte met het vloeistofeffect.

Een achtergrondafbeelding verwijderen

Verwijder als volgt een achtergrondafbeelding:

1. Klik op bewerken op de pagina en vervolgens op het potloodpictogram in het gedeelte van de banner.
2. Klik op achtergrond.
3. Klik op Verwijderen.
4. Klik op opslaan om je wijzigingen op te slaan en verder te gaan met bewerken, of klik op afsluiten en vervolgens op opslaan om de editor te sluiten.

Gedeelte-achtergronden als banners

Een gedeelte met een achtergrondafbeelding bovenaan de pagina kan dienen als visueel focuspunt om de toon te zetten voor je content. Een dergelijke afbeelding wordt meestal een banner genoemd.

Bannerafbeeldingen staan meestal op zichzelf zonder andere content in het gedeelte of bevatten heel eenvoudige tekst, zoals een titel die eroverheen wordt geplaatst. Je kunt ook banners maken met andere soorten achtergronden, zoals video's of kunst, voor een andere esthetiek.

Hoewel je ze misschien anders gebruikt, werken banners hetzelfde als elk gedeelte met een achtergrondafbeelding, dus je kunt de stappen in deze gids volgen om:

• Een bannerafbeelding toe te voegen
• Content toe te voegen over je bannerafbeelding heen
• Je bannerafbeelding ontwerpen
• Je bannerafbeelding verkleinen of vergroten
• Je bannerafbeelding verwijderen