De achtergrond van je website is erg belangrijk. Hieronder volgt eerst een kort overzicht van wat er bij een achtergrond komt kijken en wat de mogelijkheden zijn. Daarna volgen een paar links.
Achtergrond en voorgrond en alle opvullingen op je webpagina hebben invloed op elkaar. Het is niet moeilijk om precies de verkeerde kleurcombinaties bij elkaar te gebruiken, waardoor een pagina niet meer rustig leest of zelfs heel moeilijk leest. Het duidelijkst (en meest professioneel) is een lichte achtergrond met donkere tekst, maar laat dat je niet weerhouden te experimenteren!
Met CSS heb je de mogelijkheid om de achtergrond in te stellen van elk CSS element op je pagina. Je kunt zowel kleuren als afbeeldingen gebruiken. Je kunt de afbeeldingen zich laten herhalen in horizontale en/of in verticale richting of in geen van beide richtingen. Je kunt je achtergrond vastzetten, of mee laten scrollen zoals het normaal doet. Ook is het mogelijk om een afbeelding ergens op je pagina te positioneren.
Bij elke achtergrond heb je te maken met de volgende eigenschappen die je in html moet definiëren: color, image, repeat, attachment, position.
Kleuren kan je in CSS definiëren als naam, RGB of Hexadecimal. Op de volgende link kan je een lijst van kleurnamen zien die ondersteund worden door Netscape Navigator 3: http://www.utoronto.ca/webdocs/HTMLdocs/Book/Book-3ed/appf/color2.html
Het is ook mogelijk om de kleuren op je achtergrond te laten verlopen. Hiervoor moet je een smalle afbeelding maken met behulp van een tekenprogramma. Deze afbeelding integreer je vervolgens als achtergrond door het in één richting (bijvoorbeeld over de x-as) te laten herhalen (zie bijvoorbeeld www.tizag.com).
Bekijk de volgende links voor meer informatie en voorbeelden:
- http://www.w3schools.com/css/css_background.asp
- http://www.tizag.com/cssT/background.php
- http://www.handleidinghtml.nl/css/eigenschappen/background-attachment/voorbeelden.html
5 reacties to “CSS Backgrounds”
Loading ...
Beste Martijn,
Recentelijk heb ik ook een artikel/tutorial gepubliceerd over CSS Sprites: http://www.mellewynia.nl/css/2010/06/18/css-sprites-met-uitleg-en-een-simpel-voorbeeld/
Het is een techniek die je zo moeilijk kunt maken als je zelf wilt, maar zeer interessant als je je website wilt optimaliseren! Ben benieuwd naar jouw artikel hierover!
Dat maakt inderdaad wat uit ja, elk plaatje minder is weer mooi meegenomen voor de snelheid van je website. Het is inderdaad ook belangrijk om zo min mogelijk code te gebruiken voor je website. Ik zelf heb een eigen template gemaakt met alle css code. Wanneer ik een website heb gemaakt dan verwijder ik alle code die ik niet nodig heb voor de website. Zo wordt de website dan weer een stukje sneller.
Het onderwerp sprites staat al op mijn lijstje, maar bedankt voor je tip. Sprites zijn nu zeker belangrijk omdat het voor de zoekmachines belangrijk is dat je website snel geladen wordt. En met sprites kan je zeker wat snelheid winnen.
Succes met het sneller maken van je website!
Ik ben bezig mijn sites sneller te maken en dan maken die extra geladen plaatjes nogal wat uit. Ik werk vaak met Drupal en daar zit naast die plaatjes ook nog een grote hoeveelheid niet gebruikte code. Ben ik nog wel ff mee bezig dus.
Ook een mooi onderwerp voor een artikel zijn sprites. Via spriteme kun je super makkelijk een sprite maken en krijg je de bijbehorende CSS aangeleverd.
Beste Erik,
Dankjewel voor je reactie. Een afbeelding wordt pas geladen in de browser wanneer deze nodig is, dit geldt ook voor afbeeldingen vanuit het css. Dit is goed te zien wanneer je een roll-over gebruikt met een grote afbeelding. Wanneer je over de roll-over gaat dan moet de afbeelding nog geladen worden.
Mijn mening is dus dat het een fout is van pingdom.
Over backgrounds gesproken, weet jij toevallig of een plaatje altijd in de browser geladen wordt als het in de CSS als background is ingesteld. Maakt het dan wat uit of de HTML tag ook daadwerkelijk in de betreffende pagina is opgenomen? Ik gebruik wel eens de tools.pingdom.com om de snelheid van mijn pagina te checken en krijg daarvan het idee dat plaatjes die niet op de pagina staan wel worden ingeladen. Maar dat kan natuurlijk ook een foutje zijn in het programma van pingdom zelf.