Фон-картинка оставляет пустое пространство под мобильным - PullRequest
Новая
       18

Фон-картинка оставляет пустое пространство под мобильным

0 голосов
/ 18 мая 2019

Я создал веб-сайт, который в основном состоит из кнопки, и каждый раз, когда вы нажимаете на кнопку, над ней появляется предложение. В качестве фона я установил картинку. В Mobile у меня проблема в том, что когда появляется длинное предложение, контент растягивается настолько, что приходится прокручиваться, чтобы достичь нижней части страницы, а внизу страницы появляется пустое пространство под картинкой. Этот пробел не появляется в инструменте разработчика, только на моем реальном телефоне.

Пока что я довольно долго искал решение, но не нашел. Я думал об отключении background-repeat: no-repeat; в медиа-запросе, но это будет иметь побочные эффекты. 

html, body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    overflow-x:hidden;
}

body {
    background-image: url('../Images/BG.jpg');
    background-repeat: no-repeat;
    background-size:cover;
    color: #FFF;
    font-size: 125%;
    font-family: Arial, 'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: center;
}

This is the HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Generator</title>
    <link rel="stylesheet" type="text/css" href="Css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0>   
</head>

<body >
<div id="main">
    <header class="header">
        <h1> Generator<span style="color:red">.com</span> </h1>
    </header>

    <div class="mainContent">
        <article id="spruchErstellen">
        </article>
    </div>

    <div class="mainButton">
        <button class="button" onclick="neuerSpruch()">Go!</button>
    </div>

</div>

<div id="space">
</div>

    <footer id="mainFooter">
        <p>Copyright &copy 2019; All Rights Reserved</p>
    </footer>

<script src="javascript.js"></script>

</body>
</html>

Я хочу, чтобы фоновый рисунок всегда заполнял весь экран и не имел пробелов.

Привет и спасибо за вашу помощь.

1 Ответ

0 голосов
/ 18 мая 2019

Проблема, как мне кажется, возникает из-за того, что ваш контент переполняет его контейнерный блок, поэтому тело показывает белый лишний пробел внизу, потому что текст занимает больше места, чем должно быть, одно из решений, которое я нашел для вашей проблемы, это установив вертикальное переполнение на автоматическое с помощью overflow-y:auto

html, body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    overflow-y:auto;
 
}
body {
    background-image: url('https://image.freepik.com/vector-gratis/fondo-abstracto-acuarela-efecto-grunge_1340-4291.jpg');
    background-repeat: no-repeat;
    background-size:cover;
    color: #FFF;
    font-size: 125%;
    font-family: Arial, 'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: center;
}
<!DOCTYPE html>
<html lang="de">
<head>
    <title>Generator</title>
    <link rel="stylesheet" type="text/css" href="Css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0>   
</head>

<body >
<div id="main">
    <header class="header">
        <h1> Generator<span style="color:red">.com</span> </h1>
    </header>

    <div class="mainContent">
        <article id="spruchErstellen">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas justo sit amet cursus tempus. Ut nec ligula vestibulum, aliquet tellus ac, pellentesque dolor. Fusce egestas congue nibh vel ultrices. Duis mollis arcu at sollicitudin tempus. Nam sed felis quis ligula dictum fermentum. Sed eget arcu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo tellus, tempus faucibus arcu sit amet, tempor dignissim purus. Etiam rutrum fermentum accumsan. Sed interdum libero in laoreet aliquam. Integer sed dolor enim. Fusce aliquam ullamcorper dictum. Sed vehicula euismod felis, ornare condimentum metus dictum vel. Nam vestibulum ante eget ipsum efficitur pellentesque. Aliquam ac facilisis magna, eget rutrum erat. Pellentesque at quam ut metus pellentesque vulputate in ut eros.

Nam varius fermentum felis vel fringilla. Aliquam et sapien accumsan, viverra leo vel, iaculis nunc. Nullam vehicula cursus orci in malesuada. Quisque lacinia metus non lectus elementum, vel commodo augue blandit. Mauris dictum odio ut purus mattis rhoncus. Nam auctor consequat risus auctor euismod. Morbi aliquam eros nisl, in egestas tortor feugiat a. Morbi viverra nec mauris sed tempus. Cras blandit sagittis eros.

Aenean tempor risus odio, ut pretium massa mollis sed. Duis finibus justo non sem volutpat convallis. Donec rutrum nec lectus vitae iaculis. Aenean vitae tellus tristique, porta turpis nec, volutpat sem. Aliquam molestie scelerisque arcu in auctor. Nam suscipit est at est dictum maximus. Nulla facilisi. Phasellus eget mattis mauris, nec bibendum arcu. Cras ornare egestas eleifend. Integer semper elementum euismod. Sed a ligula risus. Fusce commodo sem sit amet malesuada blandit. Donec at justo et metus viverra aliquam eget sit amet turpis.

Integer ligula tellus, accumsan volutpat risus vitae, suscipit accumsan neque. Quisque sed efficitur urna. Nullam mollis ultricies enim, vitae interdum ipsum consequat consectetur. Phasellus tincidunt nunc ut nisi ullamcorper, in laoreet erat mollis. Vivamus a semper orci, sed vestibulum risus. Aenean ultrices quam tristique vestibulum vulputate. Praesent rutrum tempor libero, vitae sollicitudin tellus iaculis sit amet. Proin vulputate tellus tellus, sit amet dignissim sem venenatis sed. Pellentesque cursus lorem eu mauris malesuada scelerisque. Integer quis pulvinar urna. Aenean vitae porta ex, sit amet hendrerit lorem. Mauris dictum magna vitae imperdiet placerat.

Duis consectetur nec sem et hendrerit. Fusce ut porttitor arcu. Curabitur condimentum volutpat congue. Phasellus mauris dolor, commodo id felis sit amet, ornare imperdiet ante. Integer dignissim elit sit amet magna rutrum, vitae interdum dolor dignissim. Phasellus vulputate ac quam non porta. Nam viverra sapien vel metus consequat, vitae rutrum risus posuere. Fusce nec pellentesque sapien. Curabitur non efficitur nunc, at sodales sapien. Donec vulputate, tellus id rhoncus euismod, mauris lacus imperdiet urna, non ornare risus quam a diam. Maecenas sit amet libero ante. Aliquam non mauris a risus vehicula imperdiet. Donec volutpat euismod vulputate. Morbi nec egestas lectus, a aliquet nisi.
        </article>
    </div>

    <div class="mainButton">
        <button class="button" onclick="neuerSpruch()">Go!</button>
    </div>

</div>

<div id="space">
</div>

    <footer id="mainFooter">
        <p>Copyright &copy 2019; All Rights Reserved</p>
    </footer>

<script src="javascript.js"></script>

</body>
</html>

PS: фоновое изображение и текст только для демонстрации.

...