cssjsxbackground-imagestenciljsbackground-size

Full Screen Background Image CSS

I am trying to get a background image to be full screen but no matter what I do it only extends to where the bottom-most component ends, so about halfway down the screen. Below is my current code, CSS and JSX because I am using Stenciljs.

//JSX
<Host>
  <div class="main>
    <login-box></login-box>
  </div>
<Host>

//CSS
host {
  display: block;
}

.main {
  background-image: url("test.jpg");
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
}

login-box is another of my Stenciljs components that has its own .css file. I've tried putting the background styling in the host section but got the same results. Adding margins and padding extends the background image's spread but it is not usable because it does not change sizes when screen size changes.

Any help on how to get the image to fit the screen size?

Thank you for your help.

Solution

  • try adding 'position:absolute' to your .main class