El detalle es que no le das medidas en concreto a .bg-registro
. Si se entiende que deseas que ocupe el 100% de alto (aunque así como lo configuras no va a darte el resultado que esperas), pero de que? mmm, no sé, pudiera ser de otro elemento anterior o de la ventana o el body, etc. No especificas. Tampoco le estás dando un ancho... y tienes inhabilitado background-size: cover;
, lo suficiente para que no te funcione.
Bueno, como no les estas dando medidas de ancho y alto al contenedor que tiene por fondo la imagen, este elemento sólo va a abarcar el mismo espacio que ocupen los elementos inherentes (como el formulario), y como el formulario tampoco tiene medidas definidas, simplemente todo se reduce al espacio que está ocupando el texto (...contiene un formulario...)
.
Entonces, para cualquiera que sea el caso y/o medidas, lo ideal es que uses background-size: cover;
y especificar el ancho y alto en que deseas que abarque en concreto (para el 100% de alto usa "viewport height", es decir height: 100vh;
), así se ajustará la imagen al 100% del ancho o alto según se reajusten las dimensiones de la ventana o dispositivo, siendo siempre el lado más largo del contenedor el que queda al 100%, el otro quedará excedido, con el excedente oculto (esto procurará que siempre quede la imagen de fondo en toda el área del contenedor). No se debe ajustar al 100% de ancho y alto (con respecto a las medidas de la imagen) a la vez, porque si el dispositivo no tiene la misma proporción que la imagen, está se deformará quedando con un efecto "aplastado" o "alargado" que se ve muy, pero muy mal y poco (o nada) profesional.
NOTA: Ten en cuenta que si la relación del alto o ancho del contenedor, ventana o dispositivo es muy amplio (por ejemplo 1000px de ancho por 400px de alto, o 500px de ancho por 1200px de alto) y tu imagen mide 1200px de ancho por 800px de alto (por mencionar un ejemplo), nunca va a poder apreciarse la imagen completa o exactamente en su proporción.
También considera que si tienes una imagen de fondo en toda la ventana, tu formulario debería tener un fondo blanco, para que los textos sean claros y legibles, todo esto por uso y funcionalidad (es decir, para una buena UI/UX), ya que el diseño debe ser pensando en el usuario, y este te lo va a agradecer. Así que nunca pongas bloques de texto regular sobre imágenes de fondo.
body {
margin: 0;
padding: 0;
}
.bg-registro {
background-image: url("https://www.w3schools.com/css/paris.jpg");
height: 100vh;
width: 100%;
background-size: cover;
display: block;
}
.farciment-formulari {
width: 80%;
margin: 50px 10%;
height: 100px;
display: inline-block;
background-color: #fff;
border-radius: 3px;
padding: 15px;
box-sizing: border-box;
}
<section class="bg-registro">
<div class="col-sm-offset-1 col-md-offset-1 col-lg-offset-1 col-xs-12 col-sm-10 col-md-10 col-lg-10 registrat">
<section>
<form action='' method="POST">
<div class="farciment-formulari">
(....Contiene un formulario....)
</div>
</form>
</section>
</div>
</section>
Espero te sirva. Saludos.