Afbeelding centreren?

[pat]

Vooreerst zeggen dat ik pas vandaag eigenlijk begonnen ben met NVU. Ik had het al eens bekeken voorheen maar vandaag pas geprobeerd om iets in elkaar te knutselen.
Voor mijn eerste pagina (home) heb ik een afbeelding(logo) ingevoerd maar hoe kan ik die afbeelding net helemaal in het centrum van de pagina zetten?
En is er een manier om de pagina helemaal te zien als je ze aan het bewerken bent? Ik moet nu altjd scrollen om de bovenkant en onderkant te kunnen zien. Bedankt. Ik denk dat er de komende dagen nog veel beginnersvraagjes gaan komen.

[nirwana]

Je kunt dit bereiken via CSS. Dan kun je aangeven dat de afbeelding in het midden van de pagina moet komen: background-position: center center;

Met background-attachment: fixed; of background-attachment: scroll; geef je aan of de afbeelding moet blijven staan of met de pagina mee mag scrollen.

Hier heb je een compleet stukje code:

Code: Selecteer alles

body{
	background-image: url(images/afbeelding.png);
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

[nirwana]

Uiteraard wil je nog weten hoe je dat instelt in Nvu. Dit doe je via het menu Extra > CSS bewerken. Daar kun je de Geavanceerde modus uitschakelen. Vervolgens klik je op de knop Regel.

Aan de rechterkant klik je op "stijl toegepast op alle elementen..." en dan vul je daaronder body in. Daarna klik je op de knop daaronder (Stijlregel aanmaken).

Nu klik je op het tabblad Achtergrond. Daar stel je het volgende in:
- kies een achtergrondafbeelding via Bestand kiezen
- kies bij Tegelen voor Niet tegelen
- bepaal daaronder of de afbeelding mee moet scrollen met de pagina
- bepaal daaronder de positie (midden en midden in jouw geval)
Het leuke van Nvu is dat je al deze wijzigingen direct in je document vorm ziet krijgen. Zo kun je dus direct kijken of het resultaat is zoals je wenst.

[nirwana]

Nu heb ik dit op het body-element toegepast. body staat in HTML feitelijk voor de gehele pagina. Met de regels hierboven heb je dus een gehele pagina van een achtergrondafbeelding voorzien. Daarentegen kun je het ook op andere HTML-elementen van toepassing laten zijn. Zo zou je een tabel kunnen definieren op de pagina en het dan als achtergrond van die tabel kunnen zetten.

Ik weet dat ik met het voorstellen van een tabel andere mensen over mij heen krijg. Die zullen aangeven dat het eigenlijk anders zou moeten (met div-elementen enzo). Maar dan duik je nog weer een stuk dieper in de CSS-mogelijkheden, terwijl het er mij nu even om gaat dat je een beetje de mogelijkheden van CSS in Nvu ondervindt.