0

Bom dia!

Tenho uma tela de login, que estou fazendo com bootstrap 4.

Como eu faria para ajustar o layout da pagina para que que a imagem de background não fique faltando ou que exploda.

Como da pra ver na imagem abaixo, em monitores de 1440 x 1032 fica faltado uma parte de baixo da imagem de background

Monitores 1440 x 1032

<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));
    }
}

2 Respostas 2

1

Se o seu problema é apenas como o background de uma página de login vc pode usar o background direto no body, e usa as propriedades background-size e background-position para ajustar a imagem, no caso do exemplo que fiz eu alinhei a imagem colada no bottom na vertical e centralizada na horizontal background-position: bottom center e para o background ocupara o tamanho correto use background-size: cover

OBS: Aqui no snippet não fica muito bom pq ele não tem altura suficiente e tem que fazer o tratamento responsivo, mas exiba em "Página toda" que vc vai ver melhor como está ficando. Tentei usar uma imagem similar para vc ter uma ideia de como vai ficar.

html, body {
  height: 100%;
}
  body {
    background-image: url(https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX27495652.jpg);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
  }
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />


<div class="container">
  <div class="row">
    <div class="col-md-6 p-5">
      <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>

5
  • Opa!, vlw mais um vez. Aproveitando, se eu quisesse colocar uma imagem em cima do form, teria alguma forma de deixar ela fixa no centro? Eu tentei com código abaixo, só mexendo no margim-left, mas nesse caso, claro que vai quebrar quando mudar a resolução, teria alguma dica? <div class="p-5 col-lg-6"> <img src="~/Content/img/br_negativa.png" style="height:100px" /> </div>
    – Jhensen
    18/11/2018 às 23:22
  • @Jhensen cara no background-size vc coloca o tamanho da imagem tipo 500px 300px, e no background-position vc coloca center center, assim uma imagem de fundo vai ficar centralizada no meio da tela. Ou vc quer que a imagem esteja realmente por cima do form deixando ele encoberto por baixo da imagem?
    – hugocsl
    18/11/2018 às 23:33
  • O background ta resolvido. Só que eu resolvi botar uma logo em cima do form de login. Acima do "Efetuar Login", ai eu queria centralizar essa logo acima desse form. Ja inseri a imagem e tal, mas só não consegui alinhar ao centro do form.
    – Jhensen
    19/11/2018 às 3:41
  • @Jhensen agora ficou mais fácil de entender. Vi que vc postou uma pergunta nova, que seria o correto mesmo para não bagunçar essa etc. Vou ver se te respondo la
    – hugocsl
    19/11/2018 às 8:43
  • @Jhensen te respondi lá na outra pergunta
    – hugocsl
    19/11/2018 às 10:41
0

Uma das soluções viáveis e bem simples, em vez de adicionar o background em um style, você poderia criar uma class como no exemplo abaixo:

No exemplo abaixo em vez de utilizar o "background-image" eu utilizei o "background" e adicionei o no-repeat e alinhei a imagem no centro, para funcionar corretamente apliquei o "position: absolute;"

.py-5 {
    background: url('https://i.imgur.com/lUGkKdy.png') no-repeat center center;
    -webkit-background-size: cover; /* Safari and Chrome */
    -moz-background-size: cover;  /* Firefox */
    -o-background-size: cover; /* Opera */
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
<div class="py-5">
<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>

5
  • Opa!, Obrigado pela ajuda amigo! Aproveitando, se eu quisesse colocar uma imagem em cima do form, teria alguma forma de deixar ela fixa no centro? Eu tentei com código abaixo, só mexendo no margim-left, mas nesse caso, claro que vai quebrar quando mudar a resolução, teria alguma dica? <div class="p-5 col-lg-6"> <img src="~/Content/img/br_negativa.png" style="height:100px" /> </div>
    – Jhensen
    18/11/2018 às 23:23
  • no caso você quer adicionar um logo acima do form?
    – Vitor Hugo
    19/11/2018 às 1:27
  • isso, acima do h4. Até ja inseri, mas só que não centralizada. Ai minha duvida é se tem uma forma correta de centralizar essa imagem. Sei que tem algumas formas, mas qual seria a ideal? essa a minha dúvida
    – Jhensen
    19/11/2018 às 2:28
  • Existe inúmeras formas de deixa do jeito que você quer, mas não tem como eu te ajudar sem mais informações sobre o código, eu recomendo você abrir outra pergunta e fornecer mais informações da pagina e deixa o código um pouco mais limpo para melhor compreensão, com o código de cima até dar para te ajudar, mas na hora que você for aplicar no modelo pode dar conflito com outras class.
    – Vitor Hugo
    19/11/2018 às 2:43
  • Blz, fiz um novo post pra ficar mais claro. pt.stackoverflow.com/questions/344270/…
    – Jhensen
    19/11/2018 às 3:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .