K
K
ko_Otopec2020-04-30 17:37:24
css
ko_Otopec, 2020-04-30 17:37:24

How to make the background image fit the size of the viewable area on a mobile device?

When you open the site on a mobile device, you can see that the background image depends on the amount of content on the page, where there is more of it, the background image increases, where it is less, it decreases. For example, when you open the navigation bar on a mobile device, you can see that the background increases dramatically, as the bar expands and there is more content. How can I make the background not depend on the amount of content, only depend on the viewport? In the simulator of the mobile version in the browser, everything is displayed normally, but when you test from the phone, everything is different.

What is currently in css and html:

<body class="bg-image1">
body {  
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;

    height: 100%;
    min-height: 100%;
}
.bg-image1 {  
        background-image: url(путь); 
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question