yourservice
Gebruiker
- Lid geworden
- 22 jan 2009
- Berichten
- 35
Bedankt bron!
"Dé grootste en gratis computerhelpdesk van Nederland"
Image heeft links en rechts een witte balk
- Onderwerp starter yourservice
- Startdatum
- Status
- Lid geworden
- 13 aug 2013
- Berichten
- 5.389
Dit is een responsive background (idee komt van w3schools). Css aangevuld zodat tekst/plaatjes er bovenop komen.
De css (hier in bestand: style.css) is eenvoudig
=> Nadeel van deze oplossing:
Als de content hoger is dan de browser-hoogte dan ontstaat een witte balk onderaan.
meta name="viewport" : is nodig om aan te geven dat de pagina responsive kan zijn.
background-position center : zet de background in het midden
background-size cover : gaat nu vanuit het midden de grootte aanpassen.
Omdat de hoogte/breedte verhouding van de foto goed moet blijven (niet mag vervormen) zullen sommige delen van de foto buiten beeld vallen, dit is afhankelijk van de hoogte en de breedte van het browser venster.
Code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Mijn website</title>
</head>
<body>
<div class="bg-img"></div>
<div class="content">
<!-- Hier komt alles van de pagina -->
</div>
</body>
</html>De css (hier in bestand: style.css) is eenvoudig
Code:
html, body {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
.bg-img {
height: 100%;
background-image: url("achtergrond-foto.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* volgende 2 regels alleen voor vervagen van achtergrond */
filter: blur(8px);
-webkit-filter: blur(8px);
}
.content {
position: absolute;
top:0; left:0; right:0;
min-height: 100%;
background: transparent;
}=> Nadeel van deze oplossing:
Als de content hoger is dan de browser-hoogte dan ontstaat een witte balk onderaan.
meta name="viewport" : is nodig om aan te geven dat de pagina responsive kan zijn.
background-position center : zet de background in het midden
background-size cover : gaat nu vanuit het midden de grootte aanpassen.
Omdat de hoogte/breedte verhouding van de foto goed moet blijven (niet mag vervormen) zullen sommige delen van de foto buiten beeld vallen, dit is afhankelijk van de hoogte en de breedte van het browser venster.
Laatst bewerkt:
- Lid geworden
- 13 aug 2013
- Berichten
- 5.389
Dit is denk ik een betere oplossing
De body van de pagina
Met deze css
Voordelen: Bij teveel tekst kan de tekst normaal over de achtergrond worden gescrold; De achtergrond blijft altijd zichtbaar; Het is volledig responsive; Betere performance van de pagina omdat eerst de content van de pagina wordt getoond en daarna de (relatief grote) achtergrond foto.
De body van de pagina
Code:
<body>
<div class="content">
Hier komt alles van de pagina
</div>
<div class="bg">
<img class="bg-img" src="achtergrond.jpg" alt="">
</div>
</body>Met deze css
Code:
html, body {
height: 100%;
margin: 0;
}
img {
max-width: 100%;
height: auto;
border: 0;
}
* {
box-sizing: border-box;
}
.content {
min-height: 100%;
background: transparent;
}
.bg {
position: fixed;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -999;
}
.bg-img {
position: absolute;
top:0; right:0; bottom:0; left:0;
min-width: 50%;
min-height: 50%;
margin: auto;
/* volgende 2 regels alleen voor vervagen van achtergrond */
filter: blur(8px);
-webkit-filter: blur(8px);
}Voordelen: Bij teveel tekst kan de tekst normaal over de achtergrond worden gescrold; De achtergrond blijft altijd zichtbaar; Het is volledig responsive; Betere performance van de pagina omdat eerst de content van de pagina wordt getoond en daarna de (relatief grote) achtergrond foto.
yourservice
Gebruiker
- Lid geworden
- 22 jan 2009
- Berichten
- 35
Opgelost, bedankt voor jullie hulp.
- Status
