Как масштабировать фоновое изображение в модале? - PullRequest
Новая
       5

Как масштабировать фоновое изображение в модале?

0 голосов
/ 15 сентября 2018

У меня есть модал, и у меня есть фоновое изображение в нем. Единственное, что мне нужно сделать, это уменьшить его. Однако, когда я изменяю «ширину», она фактически меняет ширину модальной зоны. Я не могу придумать решение. Я прочитал много других постов здесь на Stackoverflow, а также на других сайтах (например, трюки CSS), но я не могу найти решение. Любые мысли будут более чем приветствоваться.

This is what it looks like now. This what it should look like.

/* Login Modal */
.login-modal-content {
  background-image: url('https://cdn.reebit.cl/images/isotipo.png');
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  background-position: right 20px bottom 10px;
}

.login-modal-header {
  border-bottom: 0px;
}

.login-modal-body {
  width: 100%;
  margin: 0 auto;
}

.login-modal-body img {
  width: 60%;
}
// My html seems correct to me //
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="modal fade bd-example-modal-lg login-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="loginModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content login-modal-content">
      <div class="modal-header login-modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
      </div>
      <div class="modal-body modal-body-img login-modal-body text-center col-lg-6 pb-5 pt-0">
        <img src="https://cdn.reebit.cl/images/header-logo.svg">
        <h5>¡Hola! Ingresa a tu cuenta</h5>
        <form class="login-form">
          <div class="form-group login-modal-form-email">
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Correo electrónico">
          </div>
          <div class="form-group login-modal-form-password">
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Clave">
          </div>
          <button type="submit" class="btn btn-block btn-modal-login">Ingresar</button>
        </form>
        <a href="#" class="login-password-forget">Olvidé mi clave</a>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 15 сентября 2018

Возможно, вы захотите использовать background-size свойство CSS: 

/* Login Modal */
.login-modal-content {
  background-size: cotain; // Or 'cover'
  background-image: url('https://cdn.reebit.cl/images/isotipo.png');
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  background-position: right 20px bottom 10px;
}

Здесь также есть очень хороший учебник: https://css -tricks.com / almanac / properties / b / background-размер /

...