0

html {
   /* Why adding height: 100% to html element can make background image completely cover the entire browser window? */
  /* height: 100% */
}

header {
/* background-color: grey; */
height: 118px;
text-align: center;
}

nav {
background-color: red;
height: 40px;
}

main {
background-color: blueviolet;
height: 400px;
text-align: center;
padding-top: 80px;
padding-left: 240px;
padding-right: 240px;
}

footer {
background-color: green;
height: 100px;
}

.container {
width: 1024px;
margin: 0 auto;
}

body {
background-color: #2f2f35;
background-image: url(https://i.imgur.com/fkf4nq5.jpg);
background-size: cover;
background-repeat: no-repeat;
}

h1 {
font-size: 84px;
color: white;
font-family: 'Microsoft YaHei', sans-serif;
}

p {
font-size: 16px;
color: white;
font-family: 'Microsoft YaHei', sans-serif;
}

a {
color: white;

}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style>

</style>
</head>

<body>
<div class="container">
 <header>
  <img src="https://i.imgur.com/TgWe6uB.png" alt="LOGO">
 </header>

 <nav>


 </nav>

 <main>
  <h1>let's meat</h1>
  <p>We love sharing good food with great people. We bring over 30 years industry experience and passion to Adare. With a dishes that are carefully designed to bring you a truly satisfying Irish food experience that you are sure to remember. 
  </p>
  <a href="#">MAKE RESERVATION</a>
  <p>Text</p>
 </main>

 <footer>

 </footer>
</div>

</body>

</html>

jsfiddle: https://jsfiddle.net/Yun93/rgoq18kw/4/

Without html {height: 100%}, when resizing the browser window (you can drag the render window in JSFiddle), the background image will not cover the entire window. But adding html {height: 100%} can fix that.

How does it work?

I found a similar question Background image cover whole screen but the answer didn't explain why.

Rick
  • 7,007
  • 2
  • 49
  • 79
  • you will first think that the duplicate has nothing to do with your questiion but if you follow it closely you will understand the repeating behavior that is happening and that you can fix using `height:100%` on the html – Temani Afif Sep 25 '19 at 08:31
  • @TemaniAfif OK thanks I will take a look. – Rick Sep 25 '19 at 08:41
  • That duplicated solved my question. I understand and he's great :). – Rick Sep 25 '19 at 09:38

0 Answers0