Helpmij.nl
Helpmij.nl
Helpmij.nl

Quote

Weergeven resultaten 1 tot 5 van 5

Onderwerp: Schaalbare achtergrond in Html

  1. #1
    Senior Member
    Geregistreerd
    3 augustus 2013
    Vraag is opgelost

    Schaalbare achtergrond in Html

    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 ?

  2. #2
    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

  3. #3
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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;
        }
    }
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  4. #4
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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%;
    }
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  5. #5
    Senior Member
    Geregistreerd
    3 augustus 2013
    Super, werkt goed, bedankt voor de hulp !

  6. Dit topic is automatisch gesloten omdat er sinds vier maanden niet meer op gereageerd is.

    Indien gewenst kan de topicstarter een verzoek tot heropening indienen.

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl

Regels
Help

Helpmij.nl en business

Partners
Sponsoren