Background-position toepassen

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Standaard wordt de achtergrondafbeelding in de linker bovenhoek gestart. Dat is 'left-top'.

Maar met 'background-position' kun je deze op elk gewenste plek positioneren.

Je kunt kiezen voor de waarden left, right, top, bottom en center.

Combineer je twee waarden dan geldt de eerste waarde voor de horizontale positie

en de tweede waarde voor de verticale positie.

Met de waarde x%, y% kun je een percentage opgeven

voor de horizontale positie of de verticale positie.

Ik ga dit toepassen in ons document.

Ik wil bij de hoofdnavigatie-items een illustratie plaatsen.

Daarvoor zoek ik de bijbehorende selector op.

De hoofdnavigatie is een lijst die in de html in het header-element staat met de class-naam head.

De illustratie moet voor de link in elk list-item komen. Dat is dus de selector .head ul li a.

Ik plaats de eigenschap background-image met de link naar de afbeelding 'arrow.png'.

Deze wil ik slechts één keer geplaatst zien en niet als een patroon.

Dus background-repeat zet ik op no-repeat.

De 'background-position' staat standaard op 'left top'. Dat is de huidige positie

Dan moet de tekst naar rechts worden opgeschoven en dat doe je met padding-left, ongeveer twintig pixels, dat is rem.

Ik wijzig de verticale positie van de afbeelding. Die zet ik op center.

Maar wat als ik de pijl juist aan het einde van het menu-item zou willen plaatsen.

Dan wijzig ik de waarden left in right.

En moet ik de padding niet naar links toepassen maar juist naar right.

Zo dus. Maar ik zou de pijlen iets meer omhoog willen plaatsen.

Dan red je het niet met deze algemene posities.

Dan zou ik met percentages kunnen gaan werken.

Nul procent staat voor linksb en honderd procent voor de uiterste waarde zowel horizontaal als verticaal.

De pijl staat iets te ver naar beneden.

Vijftig procent is dus de positie waar die nu staat.

Dan pas ik die positie aan met bijvoorbeeld vijfenveertig procent.

En nu staat de beeld optisch veel beter in het midden van de tekst.

Je ziet dat je verschillende waarden ook met elkaar kunt combineren.

Ik kan in plaats van honderd procent ook right plaatsen.

Je kunt ook exact de positie bepalen met pixels.

Maar controleer dan wel dat de afbeelding op elke schermbreedte goed verschijnt.

Want absolute maten zijn niet responsive en dat zijn percentages juist weer wel.