- 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?
Image for visual representation: The red highlighted part on the bottom right
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