Als je het ontwerpen van een website, bent u misschien geïnteresseerd in het maken van een vaste achtergrondafbeelding of watermerk op een webpagina. Dit is een veel voorkomende ontwerpbehandeling die al geruime tijd online populair is. Het is een handig effect om in je webdesign-tas vol trucs te hebben.
Als je dit nog niet eerder hebt gedaan of het eerder zonder geluk hebt geprobeerd, lijkt het proces misschien intimiderend, maar het is eigenlijk helemaal niet erg moeilijk. Met deze korte zelfstudie krijgt u binnen enkele minuten de informatie die u nodig hebt om de techniek te leren met behulp van CSS.
Beginnen
Achtergrondafbeeldingen of watermerken (die eigenlijk gewoon heel lichte achtergrondafbeeldingen zijn) hebben een geschiedenis in drukwerk. Documenten bevatten al lang watermerken om te voorkomen dat ze worden gekopieerd. Bovendien gebruiken veel flyers en brochures grote achtergrondafbeeldingen als onderdeel van het ontwerp van het gedrukte stuk. Webdesign heeft lang geleende stijlen van print en achtergrondafbeeldingen zijn een van deze geleende stijlen.
Deze grote achtergrondafbeeldingen zijn eenvoudig te maken met behulp van de volgende drie: CSS-stijl eigendommen:
- achtergrond afbeelding
- achtergrond herhaling
- achtergrond-bijlage
- achtergrondformaat
Achtergrond afbeelding
U gebruikt de achtergrondafbeelding om de afbeelding te definiëren die als uw watermerk wordt gebruikt. Deze stijl gebruikt gewoon een bestandspad om een afbeelding op uw site te laden, waarschijnlijk in een map met de naam afbeeldingen.
achtergrondafbeelding: url(/images/page-background.jpg);
Het is belangrijk dat de afbeelding zelf lichter of transparanter is dan een normale afbeelding. Dit zorgt ervoor dat "watermerk" look waarin een semi-transparante afbeelding achter de tekst, afbeeldingen en andere hoofdelementen van de webpagina ligt. Zonder deze stap zal de achtergrondafbeelding concurreren met de informatie op uw pagina en deze moeilijk leesbaar maken.
U kunt de achtergrondafbeelding aanpassen in elk bewerkingsprogramma, zoals: Adobe Photoshop.
Achtergrond herhaling
De eigenschap background-repeat komt daarna. Als u wilt dat uw afbeelding een grote afbeelding in watermerkstijl is, gebruikt u deze eigenschap om ervoor te zorgen dat die afbeelding slechts één keer wordt weergegeven.
achtergrondherhaling: geen herhaling;
Zonder de niet herhalen eigenschap, is de standaardinstelling dat de afbeelding steeds weer op de pagina wordt herhaald. Dit is ongewenst in de meeste moderne webpagina-ontwerpen, dus deze stijl moet als essentieel worden beschouwd in uw CSS.
Achtergrond-bijlage
Achtergrond-bijlage is een eigenschap die veel webdesigners vergeten. Als u het gebruikt, blijft uw achtergrondafbeelding op zijn plaats wanneer u de gemaakt eigendom. Het is wat die afbeelding verandert in een watermerk dat op de pagina wordt bevestigd.
De standaardwaarde voor deze eigenschap is rol. Als u geen achtergrond-bijlagewaarde opgeeft, schuift de achtergrond mee met de rest van de pagina.
achtergrond-bijlage: vast;
Achtergrondgrootte
Achtergrondgrootte is een nieuwere CSS-eigenschap. Hiermee kunt u de grootte van een achtergrond instellen op basis van de viewport waarin deze wordt bekeken. Dit is erg handig voor responsieve websites die in verschillende formaten wordt weergegeven op verschillende apparaten.
achtergrondformaat: omslag;
Twee nuttige waarden die u voor deze eigenschap kunt gebruiken, zijn:
- Hoes – Schaalt de achtergrond zodat de volledige breedte of volledige hoogte wordt weergegeven. Dit betekent dat sommige delen van het beeld mogelijk niet op het scherm verschijnen, maar dat het hele gebied wordt bedekt.
- Bevatten – Schaalt de afbeelding zodat zowel de volledige breedte als hoogte worden weergegeven in het gebied dat wordt gestyled. Het beeld wordt niet afgesneden, maar het nadeel is dat delen van het gebied mogelijk niet door het beeld worden bedekt.
De CSS aan uw pagina toevoegen
Nadat u de bovenstaande eigenschappen en hun waarden begrijpt, kunt u deze stijlen aan uw website toevoegen.
Voeg het volgende toe aan de HEAD van uw webpagina als u een site met één pagina maakt. Voeg het toe aan de CSS-stijlen van een extern stijlblad als u een site met meerdere pagina's bouwt en wilt profiteren van de kracht van een extern blad.
Wijzig de URL van uw achtergrondafbeelding zodat deze overeenkomt met de specifieke bestandsnaam en het bestandspad dat relevant is voor uw site. Breng eventuele andere passende wijzigingen aan om ook bij uw ontwerp te passen en u hebt een watermerk.
U kunt ook de positie opgeven
Als u het watermerk op een specifieke locatie op uw webpagina wilt plaatsen, kunt u dat ook doen. U wilt bijvoorbeeld het watermerk in het midden van de pagina of misschien in de benedenhoek, in tegenstelling tot de bovenhoek, wat de standaard is.
Om dit te doen, voegt u de eigenschap background-position toe aan uw stijl. Hiermee wordt de afbeelding precies op de plek geplaatst waar u deze wilt weergeven. U kunt pixelwaarden, percentages of uitlijningen gebruiken om dat positioneringseffect te bereiken.
achtergrondpositie: midden;