Schaalbare achtergrond in Html

Status
Niet open voor verdere reacties.

MrBob

Gebruiker
Lid geworden
3 aug 2013
Berichten
218
Ik zou jullie willen vragen om een html code die het mogelijk maakt om een plaatje in de achtergrond van een website te plaatsen die schaalbaar is. Hoeft niet eens op een telefoon te werken maar wel dat het plaatje mee schaalt als men de browser kleiner maakt en of een andere resolutie heeft. Wie kan me helpen aan een complete code ?
 
Kunt u niet de pixels van de afbeelding aanpassen naar procenten (bijv. afbeelding is bijv. width="3000" height="2250" , als je dan van de 3000 , 100% maakt en dan het gedeelte height="2250" weghalen ,dan zou de afbeelding de gehele breedte in beslag nemen) en bij 50% de helft van de pagina.

Groet Jan
 
De meta name="viewport" moet in de <head> staan en je pagina zet je in een extra <div> zoals in de code hieronder. In dit voorbeeld heb ik een breakpoint bij 768px gezet. De @media regel met bijbehorende accolades mag je weglaten om het ook op smartphone te laten werken.

html
Code:
<!doctype html>
<html lang="nl">
<head>
<!-- volgende regel moet in je <head> sectie staan -->
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div class="main-bg">

<!-- hier de inhoud van jouw pagina body -->

</div>
</body>
</html>

css
Code:
html, body {
    height: 100%;
    margin: 0;
}
body > .main-bg {
    width: 100%;
    min-height: 100%;
    background-color: #fff;
}
@media (min-width: 768px) {
    body > .main-bg {
        background-image: url('https://placeimg.com/640/640/animals');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
    }
}
 
Ander voorbeeld maar nu met een img. De foto blijft altijd in beeld (fixed) ook als je scrollt

html
Code:
<body>
<img class="main-bg" src="https://placeimg.com/640/640/animals" alt="">
<div class="main-bg">

<!-- hier komt de inhoud van jouw pagina body -->

</div>
</body>

css
Code:
html, body {
    height: 100%;
    margin: 0;
}
img.main-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: auto;
    border: 0;
}
div.main-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    min-height: 100%;
}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan