Grote afbeelding onderaan de pagina zetten.
Nu heb ik de volgende simpele code:
<!doctype html>
<head>
<style>
body {
background-image: url(../mapje/images/background-photo.jpg);
background-size: 1800px 500px;
background-repeat: no-repeat;
background-position: center bottom
}
</style>
</head>
<body>
<body>
</html>
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.
Probeer eens wat te spelen met de css property background-size:cover; of background-size:contain;
Hier meer informatie
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
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;
}
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;
}
Gewijzigd op 25/02/2015 12:29:03 door Eschwin Moerkerken
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.
Gewijzigd op 25/02/2015 12:55:47 door Eschwin Moerkerken
Daniel dd op 25/02/2015 10:17:10:
ik heb een grote afbeelding (1920x1200)
Daniel dd op 25/02/2015 10:17:10:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
background-size: 1800px 500px;[/quote]
Dat is gek ;)
background-size: cover; zal voldoen.
Als breedte van je html: width: 100vw;
vw = viewport-width. Dat is 100% absoluut van je scherm (mobiel handig).
Dat is gek ;)
background-size: cover; zal voldoen.
Als breedte van je html: width: 100vw;
vw = viewport-width. Dat is 100% absoluut van je scherm (mobiel handig).