1 Correct answer
Zeronix123 wrote
why can't the height just always be 100% ?
because you pinned it and set the resizing to none... the browser is trying to do what you told it to and that means something has to give so understand that this design will not work on small devices
8
Replies
To fill your screen with a background image, use the CSS background-size:cover property.
At the risk of being called a heretic, I made this quick demo in Dreamweaver because Muse doesn't support Flexbox for vertical centering. And since Muse is EOL now, it will never be updated to support Flexbox or any of the other modern web technologies that designers should know about. At any rate, the code for this is very simple. Now let the flaming begin...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Full Screen Background</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
padding: 0;
font-size: 3vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: url(https://placeimg.com/900/900/nature) center center fixed;
background-size: cover;
}
main {
width: 50%;
padding: 5%;
background: rgba(0,0,0,0.5);
color: #FFF;
}
</style>
</head>
<body>
<main>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis fuga sunt quasi facilis, libero consequuntur mollitia rem sapiente voluptate quos vitae esse neque impedit est quam explicabo repellendus incidunt cupiditate.</p>
</main>
</body>
</html>
Add a compatible page background-color to give the illusion that it fills viewport height. Currently, your background-color is white.
#muse_css_mq, .html {
background-color: #9f754a;
}
A background colour doesn‘t help in this case, because the video shows different colors while playing. And if: Why using HTML code for applying a background colour in Muse? There is built in function for that. 
AdChoices