0

Hola tengo varios componentes creados en angular-cli y como sabrán a la hora de crear uno se crea un archivo que es css. El problema es que al querer manipular el CSS o la hora de ponerle un fondo a la pantalla de HTML no aparece en toda la pantalla.

Este es el código del html

<div class="bg">
<div class="alert alert-primary text-center">
  <h5><b>REGISTRO</b></h5>

</div>

<div class="container alert-secondary my-5">
  <div class="row">
    <div class="col-md-10 col-md-offset-10">
      <div class="form-body">
       
        <div class="tab-content">
          <div class="tab-pane fadeIn active">
            <div class="innter-form">
              <form class="sa-innate-form">

                <div class="form-group ">
                  <div class="col-xs-12">
                    <label><b>Nombre:</b></label>
                    <input formControlName="nombre" name="nombre" class="form-control" type="text" required placeholder="Escriba su nombre">
                  </div>
                </div>

                <div class="form-group ">
                  <div class="col-xs-12">
                    <label><b>Correo Electronico:</b></label>
                    <input formControlName="email" name="email" class="form-control" type="email" required placeholder="Escriba su correo electrónico">
                  </div>
                </div>

                <div class="form-group ">
                  <div class="col-xs-12">
                    <label><b>Contraseña</b></label>
                    <input formControlName="password" name="password" class="form-control" type="password" required
                      placeholder="Escriba su contraseña">
                  </div>
                </div>


                <div class="col-xs-12">
                  <button class="btn btn-primary" type="submit">Registrarme</button>
                </div>

              </form>

            </div>

            <div class="clearfix"></div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>
</div>

Este es el código CSS:

.bg{
    background-color: beige;
}

Y como verán no aparece en toda la pantalla: introducir la descripción de la imagen aquí

3
  • Lo que quieres es colorear la parte azul también? Commented el 9 mar. 2019 a las 16:42
  • No, de la parte azúl para abajo, quiero colorear. Commented el 9 mar. 2019 a las 16:46
  • O sea la parte del formulario también? Commented el 9 mar. 2019 a las 16:48

2 respuestas 2

0

Si le das estilo con bootstrap, acuérdate de que las clases son individuales. Eje: si le das un color al row, no se transmitirá a los demás col, entonces, tienes que jugar con el css para darle un estilo generalizado, o más bien incluir todo dentro de un col y darle estilo a ese col en especial. Lo que te habrá pasado es un tema de prioridades, una caja está por encima de la otra. Podrías darle opacidad a la caja que no cambió su color y así transparentar el color que se ubica por detrás. O tan solo darle estilo del mismo color que la caja de atrás y queda camuflado.

0

Creo que de esta forma puede servirte, ya que solo estas seleccionando el área del div que contiene la clase .bg.

.bg, form{
    background-color: beige;
}

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.