Bilbo Baggins Bilbo Baggins - 2 months ago 7
CSS Question

Resizeable background image without a scroll bar

I am trying to make a static page where you will never be able to scroll when fullscreen. I just want my form centered and the background image to change with the size of the window. I am a beginner so sorry if this is really obvious.



.container {
display: flex;
justify-content: center;
/* center horizontally */
align-items: center;
/* center vertically */
}
.trans {
background: rgba(1, 1, 1, 0.6);
}
body {
height: 100%;
}
.height {
height: 100%
}
html {
height: 100%;
background: url(wallpaper.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

<div class="container height">
<form id="form">
<input class="trans text" type="password" name="Password">
<button type="submit">Submit</button>
</form>
</div>




Answer

Your CSS is right.

Just always start creating a website by reseting some CSS properties:

* {
    margin: 0px;
    padding: 0px;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-font-smoothing: subpixel-antialiased;
}

Or use Normalize.css

Why ? Because every browser is providing its own default CSS, we need to add ours.

This will help you a lot in the future :)