Resizeable background image without a scroll bar

Question

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>

Don't forget to reset the default margin of the body http://stackoverflow.com/questions/13127887/html-default-body-margin — DaniP, Sep 27 '16 at 21:53

Quentame · Accepted Answer · 2016-09-27T22:54:20.657

2

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 :)

edited Sep 27 '16 at 22:54

answered Sep 27 '16 at 22:21

Quentame

254
1
4
13

score 1 · Answer 2 · answered Sep 27 '16 at 21:52

This rule

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;

}

has to apply to the body tag instead:

body {
    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;

}

Resizeable background image without a scroll bar

2 Answers2