0

Buen día, por favor su ayuda,

Quiero aislar un fragmento de código en un componente, sin embargo cuando lo aislo, la vista cambia, no sé que puede estar pasando.

Así se ve en un solo component: introducir la descripción de la imagen aquí

Pero cuando lo aislo en un componente (HomeComponent), se ve así: introducir la descripción de la imagen aquí

Este es mi app component, de la manera en que quiero implementarlo:

<app-navbar></app-navbar>
<section class="py-5 home-section section-hero overlay bg-image" style="background-image: url('assets/images/hero_1.jpg');">
  <router-outlet></router-outlet>
</section> 

Este es el componente:

<div class="container">
<div class="row align-items-center justify-content-center">
  <div class="col-md-12">
    <div class="mb-5 text-center">
      <h1 class="text-white font-weight-bold">The Easiest Way To Get Your Dream Job</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate est, consequuntur perferendis.</p>
    </div>
    <form method="post" class="search-jobs-form">
      <div class="row mb-5">
        <div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
          <input type="text" class="form-control form-control-lg" placeholder="Job title, Company...">
        </div>
        <div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
          <select class="selectpicker" data-style="btn-white btn-lg" data-width="100%" data-live-search="true" title="Select Region">
            <option>Anywhere</option>
            <option>San Francisco</option>
            <option>Palo Alto</option>
            <option>New York</option>
            <option>Manhattan</option>
            <option>Ontario</option>
            <option>Toronto</option>
            <option>Kansas</option>
            <option>Mountain View</option>
          </select>
        </div>
        <div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
          <select class="selectpicker" data-style="btn-white btn-lg" data-width="100%" data-live-search="true" title="Select Job Type">
            <option>Part Time</option>
            <option>Full Time</option>
          </select>
        </div>
        <div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
          <button type="submit" class="btn btn-primary btn-lg btn-block text-white btn-search"><span class="icon-search icon mr-2"></span>Search Job</button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 popular-keywords">
          <h3>Trending Keywords:</h3>
          <ul class="keywords list-unstyled m-0 p-0">
            <li><a href="#" class="">UI Designer</a></li>
            <li><a href="#" class="">Python</a></li>
            <li><a href="#" class="">Developer</a></li>
          </ul>
        </div>
      </div>
    </form>
  </div>
</div>

1 respuesta 1

0

parece que es cuestion ed reubicar el componente en el scope del section que contiene el background podrias probar con:

<section class="py-5 home-section section-hero overlay bg-image" 
   style="background-image: url('assets/images/hero_1.jpg');">
  <app-navbar></app-navbar>
  <router-outlet></router-outlet>
</section> 
1
  • Gracias por comentar, pero no me sirvió! :(
    – AlJw
    el 5 may. 2022 a las 14:19

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.