0

En un proyecto Angular 7 con ng-bootstrap (es decir, incluye css y scss de bootstrap sin jQuery), estoy intentando poner una imagen como background de los tres componentes que se van a pintar en la portada, pero la estoy declarando como img solo en uno de ellos (cover.component) con position:absolute.

Agradecería enormemente cualquier ayuda.

Tengo básicamente dos problemas:

  1. No he conseguido que la imagen sea responsive;
  2. He tenido que poner el footer "fixed-bottom" para que no quedara flotando en mitad de la imagen y se me montan los datos.

La estructura de los componentes es:

  • header.component
  • cover.component
  • footer.component

Se están pintando en app.component.html

<app-header #header></app-header>
<app-cover [seccion]="header.content">
<app-footer></app-footer>
<router-outlet></router-outlet>

cover.component.html *(la imagen se declara en la línea 2)

<div class="container text-center pb-5">
<img src="assets\pictures\bg4.jpg" class="img-fluid" style="position: absolute; right: 0; top: 0; z-index: -100; opacity: 0.75;">
  <div class="row pb-sm-0 my-5">
    <div class="col-lg-8 col-md-10 mx-auto">
      <p class="lead text-center " style="opacity: 3; font-size: 30px">
        <b>Únete a la REVOLUCIÓN</b>
      </p>
    </div>
  </div>
  <div class="row py-2">
    <div class="col w-auto h-auto mx-auto">
      <div id="sandclockDesc" *ngIf="seccion==='sandclock'">
        <p class="text-justify">
          <!--Aqui va el texto1-->
        </p>
      </div>
      <div id="seniorDescr" *ngIf="seccion==='senior'">
        <p class="text-justify">
          <!--Aqui va el texto2-->
        </p>
      </div>
      <div id="robotcopDescr" *ngIf="seccion==='robotcop'">
        <p class="text-justify">
          <!--Aqui va el texto3-->
        </p>
      </div>
    </div>
  </div>
</div>

Respecto al problema del footer pongo el código por si fuera necesario

footer.component.html

<div class="container fixed-bottom">
  <div class="row">
    <div class="text-center align-self-center p-3 col-md-12">
      <!--<p class="text-white">-->
      <p>
        <b><b>Time Force Tech. S.L.</b></b>&nbsp;
        <br>Calle Sta. María Mazzarello, 1
        <br>Sevilla, CP 41005&nbsp;
        <br>P:&nbsp;954 63 23 47
      </p>
      <div class="row">
        <div class="col-md-12 d-flex align-items-center justify-content-around">
          <a href="#">
            <i class="d-block fab fa-facebook text-dark fa-lg mx-4"></i>
          </a>
          <a href="#">
            <i class="d-block fab fa-instagram text-dark fa-lg mx-4"></i>
          </a>
          <a href="#">
            <i class="d-block fab fa-twitter text-dark fa-lg mx-4"></i>
          </a>
          <a href="#">
            <i class="d-block fas fa-arrow-alt-circle-up text-dark fa-lg mx-4"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Adjunto las imágenes

Al_compilar Al_desplegar_texto Al_comprobar_responsive

2 respuestas 2

0

Con respecto a la duda uno, utilizando Bootstrap, puedes colocarle a la imagen la clase img-fluid, tal como se especifica en este enlace.

Con respecto al segundo caso, has una clase CSS con esto:

.footer {
   position: fixed;
   bottom: 0;
   width: 100%;
   height: 60px; /* Altura a tu gusto */
   line-height: 60px; /* Verticalmente centrado */
   background-color: #f5f5f5; /* Por si le quieres colocar un color */
}
4
  • Muy buenas, gracias en primer lugar. Respecto a la opción del footer, tampoco me ayuda. No es muy distinto de de fixed-bottom y me da más problemas. Creo que solucionando el primer problema se solucionará el segundo. Respecto a lo de img-fluid, ya está puesto (donde pone en la línea 2 class="img-fluid"). El problema en mi opinión va más por dónde he declarado la imagen (ahí en mitad de un componente) y con position:absolute. Commented el 20 ene. 2019 a las 19:51
  • Eres capaz de hacerlo en el body? Commented el 20 ene. 2019 a las 19:57
  • No, porque no es una imagen que vaya a estar ahí permanentemente. Al repintar la página con routing el fondo deja de ser una imagen para pasar a ser un color. Commented el 20 ene. 2019 a las 20:01
  • Entonces has un componente padre y que los demas sean hijos. En el componente padre asigna la imagen. Commented el 20 ene. 2019 a las 20:04
0

Tambien he tenido bastante problemas con poner la imagen en background desde una clase css aparte , lo más recomendable es que la apliques como un estilo en línea, a cada elemento que necesitas que tenga esta imagen de background, es la manera más rápida y que siempre funciona .

      <div Style="background-image:url(".../")">
         <div>
             <!--aqui pones el texto-->
         </div>       
      </div>
0

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.