How to scale a background image in a modal? - html

Question

I have a modal, and I have a background image in it. The only thing I need to do is scale it down. However, when I change the "width", it actually changes the modal's width. I can't come up with a solution. I have read many other posts here on Stackoverflow as well as other sites (such as css tricks) but I can not find a solution. Any thoughts will be more than welcome.
/* 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">×</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>
Olvidé mi clave
</div>
</div>
</div>
</div>

Answer 1

You probably wanna try using background-size CSS property:
/* 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;
}
There's a very good tutorial here too: https://css-tricks.com/almanac/properties/b/background-size/