Estoy poniendo una imagen en mi web y quiero que me vaya de izquierda a derecha y ocupe toda la zona de la pantalla. Como se ve en la imagen solo aparece en un trozo y no sé que propiedades de css tengo que poner para que se ajuste de izquierda a derecha o si tengo que alargar los pixeles con algún programa. La imagen va justo debajo del header y encima del formulario. Adjunto código aunque la imagen no se verá. También tiene que ser responsive y se adapte a cualquier tipo de pantalla. Si me pudierais asesorar un poco. Muchas gracias.
<html>
<style>
.imagen {
position: relative;
display: inline-block;
text-align: center;
}
.titulo {
position: absolute;
top: 10px;
left: 10px;
color: white;
}
.parrafo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
<body>
<div class="imagen">
<img src="/WebBurger/public/img/fotoregistro.jpg" class="foto">
<div class="titulo"><b>REGISTRARME</b></div>
<div class="parrafo"><b>Regístrate para disfrutar de múltiples funcionalidades</b></div>
</div>
<div id="wrapper">
<form action="../public/forms/registro.php" method="post">
<dl>
<dt><label for="nombre">NOMBRE</label></dt>
<dd><input type="text" id="nombre" name="nombre" maxlength="30" size="29" required /></dd>
<dt><label for="apellidos">APELLIDOS</label></dt>
<dd><input type="text" id="apellidos" name="apellidos" maxlength="30" required /></dd>
<dt><label for="fecha_nacimiento">FECHA DE NACIMIENTO</label></dt>
<dd><input type="date" id="fecha_nacimiento" name="fecha_nacimiento" required /></dd>
<dt><label for="telefono">TELÉFONO</label></dt>
<dd><input type="tel" id="telefono" name="telefono" required placeholder="XXXXXXXXX" pattern="[0-9]{9}" /></dd>
<dt><label for="ciudad">CIUDAD</label></dt>
<dd><input type="text" id="ciudad" name="ciudad" maxlength="50" required /></dd>
<dt><label for="email">EMAIL</label></dt>
<dd><input type="text" id="email" name="email" placeholder="[email protected]" required maxlength="30" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" /></dd>
<p class="texto-contra">
La contraseña debe contener al menos un número, una mayúscula, una minúscula y un mínimo de 8 caracteres.
</p>
<dt><label for="contrasena">CONTRASEÑA</label></dt>
<button id="mostrar_contrasenaregistro" type="button" onclick="mostrarContrasenaregistro()"> <span class="fa fa-eye-slash icon"></span> </button>
<dd><input type="password" id="contrasena" name="contrasena" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" maxlength="40" required /></dd>
<dd><input type="submit" name="usub" value="¡Quiero registrarme!" /></dd>
</dl>
</form>
<?php include(__DIR__.'/../lib/inc/footer.php'); ?>
</div>
</body>
</html>