Vfrdtyky

Good Morning!

I have a login screen, which I'm doing with bootstrap 4.

How would I adjust the layout of the page so that the background image is not missing or exploding.

As you can see in the image below, in monitors of 1440 x 1032 a bottom part of the background image is missing

1440 x 1032 resolution

<link rel="stylesheet" href="theme.css" type="text/css">

<div class="py-5" style="background-image: url('../Content/img/cover-stripes.svg'); background-position:left center; background-size: cover;">

<div class="container">

    <div class="row">

        <div class="p-5 col-lg-6">



            @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))

            {

                @Html.AntiForgeryToken()

                <h4>Efetuar login.</h4>

                <hr />

                @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                <div class="form-group">

                    @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })

                    <div class="col-md-10">

                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })

                        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

                    </div>

                </div>

                <div class="form-group">

                    @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })

                    <div class="col-md-10">

                        @Html.PasswordFor(m => m.Password, new { @class = "form-control" })

                        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })

                    </div>

                </div>

                <div class="form-group">

                    <div class="col-md-offset-2 col-md-10">

                        <div class="checkbox">

                            @Html.CheckBoxFor(m => m.RememberMe)

                            @Html.LabelFor(m => m.RememberMe)

                        </div>

                    </div>

                </div>

                <div class="form-group">

                    <div class="col-md-offset-2 col-md-10">

                        <input type="submit" value="Entrar" class="btn btn-default" />

                    </div>

                </div>



            }

        </div>

    </div>

</div>

SASS

$enable-rounded:            true !default;

$enable-shadows:            true;

$enable-transitions:        true;

$enable-hover-media-query:  false;

$enable-grid-classes:       true;

$enable-print-styles:       true;



// Variables

//

// Colors



$theme-colors: (

  primary: #12bbad,

  secondary: #4f70ce,

  light: #f3f3f3,

  dark: #151515,

  info: #ccc,

  success: #28a745,

  warning: #ffc107,

  danger: #dc3545

);



$body-bg: white;

$body-color: #333;





$body-color-inverse: invert($body-color) !default;

$link-color: #12bbad;



// Fonts

$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

$headings-font-family: $font-family-base;

$display-font-family: $font-family-base;

$font-weight-normal: 200;

$headings-font-weight: 200;

$lead-font-size:   1.30rem;



$spacer: 1.5rem;



@import 'bootstrap-4.1.3';





html,body {

   height:100%;

}



.cover {

    min-height:100%;

  display:flex;

  align-items:center

}





.bg-gradient {

  overflow: hidden;

  color: color-yiq(map-get($theme-colors, 'primary'));

  background: linear-gradient(-30deg, theme-color("secondary") 0%, theme-color("primary") 50%, theme-color("primary") 100%);

}



.filter-dark {

  overflow: hidden;

  position: relative;

  color: color-yiq(map-get($theme-colors, 'dark'));

    &:before {

    position: absolute;

    top:0px;

    left:0px;

    width:100%;

    height: 100%;

    content: ' ';

    background: rgba(map-get($theme-colors, 'dark'), 0.75);

  }

}



.filter-light {

  overflow: hidden;

  position: relative;

  color: color-yiq(map-get($theme-colors, 'light'));

    &:before {

    position: fixed;

    top:0px;

    left:0px;

    width:100%;

    height: 100%;

    content: ' ';

    background: rgba(map-get($theme-colors, 'light'),0.75);

  }

}



.filter-color {

  overflow: hidden;

  position: relative;

  color: color-yiq(map-get($theme-colors, 'primary'));

    &:before {

    position: absolute;

    top:0px;

    left:0px;

    width:100%;

    height: 100%;

    content: ' ';

    background: rgba(map-get($theme-colors, 'primary'), 0.75);

  }

}



.filter-gradient {

  overflow: hidden;

  position: relative;

  color: color-yiq(map-get($theme-colors, 'primary'));

    &:before {

    position: absolute;

    top:0px;

    left:0px;

    width:100%;

    height: 100%;

    content: ' ';

    background: linear-gradient(-30deg, transparentize(theme-color("secondary"), 0.1) 0%, transparentize(theme-color("primary"), 0.1) 50%, transparentize(theme-color("primary"), 0.05) 100%);

  }

}



.filter-fade-in {

  overflow: hidden;

  position: relative;

  &:before {

    position: absolute;

    top:0px;

    left:0px;

    width:100%;

    height: 100%;

    content: ' ';

    background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1));

    }

}

You can use width100vw and height:100vh
Vh is view height and vw is view width