Copy link to clipboard
Copied
hey, i have a webpage with very wide background videos or pictures, so that they fit on very wide screens. all my objects are pinned to the middle of the page and resizing is set to none on everything.
now the problem is that when i publish the website, theres a white space on the bottom, varying on different screens. when i previewd it in brower the white space wasnt there.
I made the whole thing a bit taller, and now when i preview it i have to scroll down on it.
why can't the height just always be 100% ?
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
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
hey man, well the problem is that everything on the webpage has to be vertically responsivde but not horizontally.
as u can see here, on the home page, the background is the video of the moose blinking, the blackboard is part of that video. everything has to stay centered and same scale as the background though.
Copy link to clipboard
Copied
Nancy‘s contribution doesn‘t help you, if you are using Muse — as very often in these kinds of situations. Don‘t mind.
Just read this thread, it may be more useful: https://forums.adobe.com/message/4531004#4531004
Copy link to clipboard
Copied
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;
}
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
It's not a video. It's animation.
The landing page uses JavaScript to redirect to a 2nd page (moose & chalkboard). And yes, the code in my reply #4 is generated by Muse and specific to the moose & chalkboard page. The landing page will need a different background color.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
Ussnorway wrote
...this design will not work on small devices
I agree. The animation must be scalable to fit all devices.
Animate CC: Responsive Canvas Scaling | Adobe Blog