Gigadesign, XHTML-CSS website maken

Afbeeldingen positioneren

Deze selector zorgt voor het uitlijnen/positioneren van een achtergrondafbeelding die je in CSS via deze selector bepaald.

Als er een achtergrondafbeelding is bepaald, zorgt deze eigenschap voor de positie ervan

Met het gebruik van de selector heb je zovel mogelijkheden dat je bijna moet beginnen te twijfelen welke je nu gaat gebruiken, daarom hier eens op een rijtje welke je allemaal kan gebruiken en ook welke je mag combineren.

Daar ik reeds voorheen schreef over het gebruik van shorthand methodes, zal ik deze ook verder gebruiken, en niet de selector alleen gebruiken.

Je hebt dus de keuze tussen:

1. percentages , %
2. absolute posities, cm, mm, pt, px, em, etc…
3. keywords, top left center bottom right

Beetje opgelet

fooelement {
background: #fff url(image.gif) no-repeat left top;
}
Opmerking: de volgorde van keywords heeft geen belang, top left en left top geven alle twee hetzelfde resultaat.

fooelement {
background: #fff url(image.gif) no-repeat 20% 30%;
}
Opmerking: het gebruik van 2 percentages geeft het resultaat dat deze percentages ook van je afbeelding worden afgenomen, alsook dat de volgorde van waarden nu wel belangrijk is, 1ste waarde is vanaf links, 2de waarde is vanaf boven.

fooelement {
background: #fff url(image.gif) no-repeat 2px 10px;
}
Opmerking: ook hier is de volgorde van belang, 1ste waarde is vanaf links, 2de waarde vanaf boven. Indien je maar één waarde opgeeft zal de waarde vanaf links worden gerekend.

Voorbeelden voor % en keywords

Om dit voorbeeld te geven heb ik iets heel ergs gedaan, ik heb een <table> gebruikt, maar het gebruik ervan is gerechtvaardigd.

Dus als je wil dat een kleine afbeelding samen gaat met de <h1> of <h2> en je wenst ook nog dat de afbeelding in het midden van de tekst wordt geplaatst, zoals hier bij de post-titels, dan doe je dit:

fooelement {
background: #fff url(image.gif) no-repeat 0% 50%;
}
fooelement {
background: #fff url(image.gif) no-repeat left center;
}
fooelement {
background: #fff url(image.gif) no-repeat center left;
}
fooelement {
background: #fff url(image.gif) no-repeat left;
}

Je ziet mogelijheden genoeg.

En dan nog iets heel belangrijk

Je kan geen waarden combineren, bijvoorbeeld door keywords en percentages te mixen, alsook geen absolute waarden met percentages of keywords.

RaDDiX heeft mij per email op de hoogte gebrachtdat het wel mogelijk is om waarden te combineren maar er zijn maar een beperkt aantal mogelijkheden Voor meer info staat deze website je ter beschikking.