CSS: How can I stop overflow on the y-axis?

Joined
Sep 12, 2022
Messages
39
Reaction score
0
I do not think overflow-y set to hidden applies here, it's not just practical. The initial code alone is sufficient to make sure that the background-image is exactly 100vh or 100%, what causes the little overflow and how can I fix it?

HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Quote Generator</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <span>
            <h2>JavaScript quote Generator</h2>
        </span>
        <main>
            <div>
                <span class="random-quote">"I have always believed that each man makes his own happiness and is responsible for his own problems. It is a simple philosophy."</span>
                <span class="author">Ray Kroc</span>
                <div class="button">new quote</div>
            </div>
            <div>
                <span class="random-quote">When we have respect for ourselves and others, we gravitate towards connections that encourage that.</span>
                <span class="author">Simeon Lindstrom</span>
                <div class="button">new quote</div>
            </div>
            <div>
                <span class="random-quote">Anger is the ultimate destroyer of your own peace of mind.</span>
                <span class="author">Dalai Lama</span>
                <div class="button">new quote</div>
            </div>
            <div>
                <span class="random-quote">A man should have the aim and the determination to be honest and upright and sincere in all that he undertakes. If he adds persistency to this he can hardly help being successful</span>
                <span class="author">L. R. Ellert</span>
                <div class="button">new quote</div>
            </div>
            <div>
                <span class="random-quote">Only one thing is ever guaranteed, that is that you will definitely not achieve the goal if you don't take the shot.</span>
                <span class="author">Wayne Gretzky</span>
                <div class="button">new quote</div>
            </div>
        </main>
        <script src="app.js"></script>
    </body>
</html>

CSS:
body, html {
    height: 100vh; /*I also used 100%, didn't work*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

body{
    background-image: url('quotesbg.jpg');
    height: 100vh; /*I also used 100%, didn't work*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
}

Image for visual representation: The red highlighted part on the bottom right
the highlighted red part.PNG
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,707
Messages
2,569,344
Members
44,635
Latest member
Matt231

Latest Threads

Top