Hallo, ik heb een grote afbeelding (1920x1200), alleen die wil ik nu onderaan mijn pagina hebben zodat ik daarboven bijvoorbeeld een header kan zetten (zoals deze site (alleen dan geen video): http://www.magicleap.com/#/home).
Nu heb ik de volgende simpele code:
Ik heb m'n afbeelding nu center bottom maar hoe kan ik hem precies zoals op die website krijgen (bijvoorbeeld) want met center bottom wordt de afbeelding maar een heel smalle lijn helemaal bovenaan m'n pagina dus ergens gaat er iets niet goed. Alvast bedankt.
Ik denk dat je met background-size:cover; al ver genoeg kunt komen. Zet ook de html breedte en hoogte op 100% en die van de body ook. Uiteindelijk zul je dus ongeveer het volgende moeten hebben zo uit mijn hoofd:
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
background-image:url('pad/naar/je/afbeelding');
background-repeat: no-repeat;
background-position: center center; /* legt de focus op het midden, je kunt ook left top gebruiken maar ik raad center center aan */
background-size:cover;
}
Zoals de site in je voorbeeld laat zien zijn dit elementen die binnen de body staan, dus je zou een <header> element kunnen gebruiken of een div en dan de pagina opmaken zoals je gewend bent.
Ik las in een andere post dat je beginnend scripter bent. Wellicht is het dan handig om een website welke jij leuk vind te inspecteren door rechts te klikken en 'element inspecteren' aan te klikken, er opent zich dan een console waarin je precies kunt zien hoe de structuur van die website is opgebouwd en welke styles er aan bepaalde elementen worden meegegeven.
