1

Tengo esta sección:

.bg-registro {
        background-image: url("https://www.w3schools.com/css/paris.jpg");
        min-height: 100%;
        background-repeat: repeat-y;
        /* background-size: cover;  */
        position: relative;
    }
    <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>

El problema es que al cambiar de medida, la imagen no se repite ni se adapta, básicamente ocupa una medida en concreto. Necesito que ocupe toda la sección "bg-rgistro"

EDIT

Antes de nada muchas gracias a todos los que me estáis proporcionando ayuda, cuando las medida del dispositivo es inferior a lg, la imagen solo ocupa una parte de la pantalla quedando medio formulario con el fondo blanco por defecto, en lugar de expandir la imagen para que ocupe todo el cuerpo.

Imagen con el formulario

3
  • Tu quieres que se repita o se adapte? Ocupando toda la sección Commented el 19 ene. 2018 a las 12:01
  • Que se expanda ocupando toda la sección.
    – padronuri
    Commented el 22 ene. 2018 a las 7:53
  • Hola @PadroNuri ¿Has solucionado tu problema? Commented el 2 feb. 2018 a las 18:00

4 respuestas 4

0

si lo que quieres es que el background-image sea responsive debes usar padding

.bg-registro {
        background-image: url("https://www.w3schools.com/css/paris.jpg");
        padding:20% 0;
        background-repeat: repeat-y;
        /* background-size: cover;  */
        position: relative;
    }

0

No he terminado de entender tu pregunta, es decir, veo que quitaste background-size: cover y sin esto, pues nunca va a suceder esto que dices:

Necesito que ocupe toda la sección bg-registro

.bg-registro {
        background-image: url("https://www.w3schools.com/css/paris.jpg");
        min-height: 100vh;
        background-size: cover;
        position: relative;
        width: 100%;
    }
<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>

Ahora también dices:

(..) la imagen no se repite ni se adapta...

Precisamente si le quitas el background-size: cover; y le agregas background-repeat: se va a repetir, sin problema. Ahora si quieres que se repita, pero teniendo unas medidas en concreto, sin deformarse puedes probar: Background-size: 300px auto;:

.bg-registro {
        background-image: url("https://www.w3schools.com/css/paris.jpg");
        min-height: 100vh;
        background-size: 200px auto;
        background-repeat: repeat;
        position: relative;
        width: 100%;
    }
<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>

Una tercera opción es que uses por ejemplo las medidas: vmin, vmax, vh, o vw. Por ejemplo si quieres que siempre, sin importar que ocupe el 100% de la altura del dispositivo que no te importa si se repite a los laterales, puedes usar Background-size: auto 100vh; background-repeat: auto;, sí quieres que siempre ocupe el 100% del ancho del dispositivo, sin importar si el contenedor cubre o no todo el ancho: background-size: 100vw auto;, sí quieres que conserve la misma proporción de tamaño en cualquier dispositivo sin importar el tamaño de este usa las otras dos medidas: vmin o vmax;

Si no es nada de esto lo quieres, te recomiendo adjuntes una imagen de que es lo que quieres lograr o trata de darte explicar mejor, porque en un principio, querer que se se ocupe todo un elemento, pero que además se repita, es una contradicción.

0

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.

0

Previamente, tienes que entender que si no especificas un ancho a la "caja" del contenido, dicha imagen de fondo solo ocupara el contenido que le otorgue por así decirlo, el texto en este caso.

Primero te conviene crear el formulario, para ya definir un alto y ancho del centro. Y luego buscar el ancho y alto del contenedor de fondo.

Prueba lo siguiente: (y agrega el formulario):

.bg-registro {
        background-image: url("https://www.w3schools.com/css/paris.jpg");
        background-repeat: no-repeat;
        background-position:100%;
        height:100vh;
        width:100%;
        background-size: cover;
    }
.farciment-formulari {
        background:rgba(250,250,250,.5);
        padding:1em;
    }
<!DOCTYPE html>
<html>

<head>
<!-- agregue los .css de bootstrap para trabajar mejor aquí -->
  <meta charset="utf-8">
  <link rel="stylesheet1" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.csss">
</head>

<body>
    <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 col-md-8">
                      (....Contiene un formulario....)
                    </div>
                </form>
           </section>
       </div>
    </section>
   </body>
   </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.