title: Failed to shown background image properly in asp.net core
body: <p>I am using an online template for used my project. When I run my application, my template is working perfectly.</p>
  <p>The problem is <strong>when I give a route to go to another page of my application</strong> for example (<code>area/controller/action</code>) then its not showing any image on my view page which I expected.</p>
  <p><strong>ere is my _Layout page code</strong>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot; /&gt;
      &lt;title&gt;@ViewData[&quot;Title&quot;] - UBC&lt;/title&gt;
  
      &lt;environment include=&quot;Development&quot;&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;~/lib/bootstrap/dist/css/bootstrap.css&quot; /&gt;
      &lt;/environment&gt;
      &lt;environment exclude=&quot;Development&quot;&gt;
        &lt;link
          rel=&quot;stylesheet&quot;
          href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot;
          asp-fallback-href=&quot;~/lib/bootstrap/dist/css/bootstrap.min.css&quot;
          asp-fallback-test-class=&quot;sr-only&quot;
          asp-fallback-test-property=&quot;position&quot;
          asp-fallback-test-value=&quot;absolute&quot;
          crossorigin=&quot;anonymous&quot;
          integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot;
        /&gt;
      &lt;/environment&gt;
  
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;https://fonts.googleapis.com/css?family=Open+Sans:400,600&quot;
      /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;~/theme1/css/all.min.css&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;~/theme1/css/bootstrap.min.css&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;~/theme1/slick/slick.css&quot; /&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        type=&quot;text/css&quot;
        href=&quot;~/theme1/slick/slick-theme.css&quot;
      /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;~/theme1/css/templatemo-style.css&quot; /&gt;
    &lt;/head&gt;
    &lt;body id=&quot;servicesPage&quot;&gt;
      &lt;div
        class=&quot;parallax-window&quot;
        data-parallax=&quot;scroll&quot;
        data-image-src=&quot;theme1/img/1.jpg&quot;
      &gt;
        &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;div class=&quot;row tm-brand-row&quot;&gt;
            &lt;div class=&quot;col-lg-4 col-11&quot;&gt;
              &lt;div class=&quot;tm-brand-container&quot;&gt;
                &lt;i class=&quot;fas fa-4x fa-pen tm-brand-icon&quot;&gt;&lt;/i&gt;
                &lt;div class=&quot;tm-brand-texts&quot;&gt;
                  &lt;h1 class=&quot;text-uppercase tm-brand-name text-light big-stone&quot;&gt;
                    UBC
                  &lt;/h1&gt;
                  &lt;p class=&quot;small text-light&quot;&gt;We Bring The Best For You&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-lg-8 col-1&quot;&gt;
              &lt;div class=&quot;tm-nav&quot;&gt;
                &lt;nav
                  class=&quot;navbar navbar-expand-lg navbar-light tm-bg-white-transparent text-dark&quot;
                &gt;
                  &lt;button
                    class=&quot;navbar-toggler&quot;
                    type=&quot;button&quot;
                    data-toggle=&quot;collapse&quot;
                    data-target=&quot;#navbarNav&quot;
                    aria-controls=&quot;navbarNav&quot;
                    aria-expanded=&quot;false&quot;
                    aria-label=&quot;Toggle navigation&quot;
                  &gt;
                    &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
                    &lt;ul class=&quot;navbar-nav&quot;&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;
                        &lt;div class=&quot;tm-nav-link-highlight&quot;&gt;&lt;/div&gt;
                        &lt;a class=&quot;nav-link&quot; href=&quot;index.html&quot;&gt;Home&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;
                        &lt;div class=&quot;tm-nav-link-highlight&quot;&gt;&lt;/div&gt;
                        &lt;a class=&quot;nav-link&quot; href=&quot;about.html&quot;&gt;About&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;
                        &lt;div class=&quot;tm-nav-link-highlight&quot;&gt;&lt;/div&gt;
                        &lt;a class=&quot;nav-link&quot; href=&quot;services.html&quot;&gt;Services&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;
                        &lt;div class=&quot;tm-nav-link-highlight&quot;&gt;&lt;/div&gt;
                        &lt;a class=&quot;nav-link&quot; href=&quot;testimonials.html&quot;
                          &gt;Testimonials&lt;/a
                        &gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;nav-item green-highlight active&quot;&gt;
                        &lt;div class=&quot;tm-nav-link-highlight&quot;&gt;&lt;/div&gt;
                        &lt;a
                          class=&quot;nav-link&quot;
                          asp-action=&quot;Index&quot;
                          asp-controller=&quot;Home&quot;
                          &gt;Contact &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a
                        &gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/nav&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Testimonials header --&gt;
          &lt;section class=&quot;row&quot; id=&quot;tmServices&quot;&gt;
            &lt;div class=&quot;col-12&quot;&gt;
              &lt;div
                class=&quot;parallax-window tm-services-parallax-header tm-testimonials-parallax-header&quot;
                data-parallax=&quot;scroll&quot;
                data-z-index=&quot;101&quot;
                data-image-src=&quot;img/people.jpg&quot;
              &gt;
                &lt;div
                  class=&quot;tm-bg-black-transparent text-center tm-services-header tm-testimonials-header&quot;
                &gt;
                  &lt;h2
                    class=&quot;text-uppercase tm-services-page-title tm-testimonials-page-title&quot;
                  &gt;
                    The University Of British Columbia
                  &lt;/h2&gt;
                  &lt;p class=&quot;tm-services-description mb-0 small&quot;&gt;
                    Number One University Of The Whole World
                  &lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;col-12&quot;&gt;
              &lt;div class=&quot;tm-bg-black-transparent tm-services-detail-box&quot;&gt;
                &lt;p&gt;
                  Aenean convallis justo purus, id pulvinar enim finibus vitae.
                  Fusce et bibendum nisi, vitae mollis turpis. Aliquam tellus mi,
                  maximus vel orci imperdiet, convallis cursus tortor. Donec
                  sollicitudin metus sit amet nisl rhoncus, id ultrices risus
                  interdum. Proin mollis nulla nulla, ac cursus enim ornare a.
                  Cras quis porta lectus. Pellentesque eu ultrices arcu. Proin ac
                  tristique dui. Praesent mi odio, aliquam ac leo sit amet, dictum
                  sodales diam.
                &lt;/p&gt;
                &lt;p&gt;
                  Quisque commodo, orci eget suscipit vestibulum, metus orci
                  fringilla urna, eget dignissim justo odio sit amet tellus. Morbi
                  dapibus molestie massa nec congue. Etiam lacinia pretium psuere.
                  Integer sodales porttitor lobortis. Nam vestibulum vestibulum
                  lectus non pulvinar. Vivamus eget sapien vitae magna lobortis
                  rhoncus molestie sit amet est. Fusce ultrices justo vitae
                  blandit consequat.
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;section class=&quot;row tm-contact-row&quot;&gt;&lt;/section&gt;
          &lt;section class=&quot;row tm-testimonials-section&quot;&gt;
            &lt;div class=&quot;col-12 tm-carousel&quot;&gt;
              &lt;div class=&quot;tm-bg-black-transparent tm-testimonial-box text-center&quot;&gt;
                &lt;div class=&quot;tm-person-img-container&quot;&gt;
                  &lt;img
                    src=&quot;theme1/img/person-1.png&quot;
                    alt=&quot;Image&quot;
                    class=&quot;img-fluid mx-auto&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;h3 class=&quot;tm-about-name tm-uppercase&quot;&gt;Praesent ornare&lt;/h3&gt;
                &lt;p class=&quot;tm-about-description&quot;&gt;
                  Vestibulum semper dolor sed elit mattis placerat cursus sed ac
                  urna. Mauris eget suscipit purus, id ullamcorper mi. Mauris eu
                  velit semper turpis semper.
                &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;tm-bg-black-transparent tm-testimonial-box text-center&quot;&gt;
                &lt;div class=&quot;tm-person-img-container&quot;&gt;
                  &lt;img
                    src=&quot;theme1/img/person-2.png&quot;
                    alt=&quot;Image&quot;
                    class=&quot;img-fluid mx-auto&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;h3 class=&quot;tm-about-name tm-uppercase&quot;&gt;Maecenas Pretium&lt;/h3&gt;
                &lt;p class=&quot;tm-about-description&quot;&gt;
                  Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor
                  bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa
                  elementum, volutpat.
                &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;tm-bg-black-transparent tm-testimonial-box text-center&quot;&gt;
                &lt;div class=&quot;tm-person-img-container&quot;&gt;
                  &lt;img
                    src=&quot;theme1/img/person-3.png&quot;
                    alt=&quot;Image&quot;
                    class=&quot;img-fluid mx-auto&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;h3 class=&quot;tm-about-name tm-uppercase&quot;&gt;Nulla Quis Magna&lt;/h3&gt;
                &lt;p class=&quot;tm-about-description&quot;&gt;
                  Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex
                  massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida
                  maximus ultrices.
                &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;tm-bg-black-transparent tm-testimonial-box text-center&quot;&gt;
                &lt;div class=&quot;tm-person-img-container&quot;&gt;
                  &lt;img
                    src=&quot;img/person-1.png&quot;
                    alt=&quot;Image&quot;
                    class=&quot;img-fluid mx-auto&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;h3 class=&quot;tm-about-name tm-uppercase&quot;&gt;Praesent ornare&lt;/h3&gt;
                &lt;p class=&quot;tm-about-description&quot;&gt;
                  Vestibulum semper dolor sed elit placerat cursus sed ac urna.
                  Mauris eget suscipit purus, id ullamcorper mi. Mauris eu velit
                  semper turpis semper.
                &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;tm-bg-black-transparent tm-testimonial-box text-center&quot;&gt;
                &lt;div class=&quot;tm-person-img-container&quot;&gt;
                  &lt;img
                    src=&quot;img/person-2.png&quot;
                    alt=&quot;Image&quot;
                    class=&quot;img-fluid mx-auto&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;h3 class=&quot;tm-about-name tm-uppercase&quot;&gt;Maecenas Pretium&lt;/h3&gt;
                &lt;p class=&quot;tm-about-description&quot;&gt;
                  Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor
                  bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa
                  elementum, volutpat.
                &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;tm-bg-black-transparent tm-testimonial-box text-center&quot;&gt;
                &lt;div class=&quot;tm-person-img-container&quot;&gt;
                  &lt;img
                    src=&quot;theme1/img/person-3.png&quot;
                    alt=&quot;Image&quot;
                    class=&quot;img-fluid mx-auto&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;h3 class=&quot;tm-about-name tm-uppercase&quot;&gt;Nulla Quis Magna&lt;/h3&gt;
                &lt;p class=&quot;tm-about-description&quot;&gt;
                  Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex
                  massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida
                  maximus ultrices.
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/section&gt;
          &lt;section&gt;
            &lt;div class=&quot;container tm-bg-black-transparent tm-services-detail-box&quot;&gt;
              &lt;partial name=&quot;_CookieConsentPartial&quot; /&gt;
              @RenderBody()
            &lt;/div&gt;
          &lt;/section&gt;
          &lt;!-- Call to Action --&gt;
          &lt;section class=&quot;row tm-testimonials-cta&quot; id=&quot;tmCallToAction&quot;&gt;
            &lt;div class=&quot;col-12 tm-call-to-action-col&quot;&gt;
              &lt;img
                src=&quot;theme1/img/call-to-action-3.jpg&quot;
                alt=&quot;Image&quot;
                class=&quot;img-fluid tm-call-to-action-image&quot;
              /&gt;
              &lt;div class=&quot;tm-bg-white tm-call-to-action-text&quot;&gt;
                &lt;h2 class=&quot;tm-call-to-action-title&quot;&gt;
                  Vivamus sollicitudin tellus
                &lt;/h2&gt;
                &lt;p class=&quot;tm-call-to-action-description&quot;&gt;
                  Maecenas maximus tellus in dolor auctor tristique. Nam hendrerit
                  posuere laoreet. Aliquam erat volutpat. Nulla eros est,
                  imperdiet vel feugiat non, ullamcorper mattis nulla.
                &lt;/p&gt;
                &lt;form action=&quot;#&quot; method=&quot;get&quot; class=&quot;tm-call-to-action-form&quot;&gt;
                  &lt;input
                    name=&quot;email&quot;
                    type=&quot;email&quot;
                    class=&quot;tm-email-input&quot;
                    id=&quot;email&quot;
                    placeholder=&quot;Email&quot;
                  /&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;btn btn-secondary&quot;&gt;
                    Get Updates
                  &lt;/button&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;!-- Page footer --&gt;
          &lt;footer class=&quot;row&quot;&gt;
            &lt;p class=&quot;col-12 text-white text-center tm-copyright-text&quot;&gt;
              Copyright &amp;copy; 2020 App Landing Page. Designed by
              &lt;a href=&quot;#&quot; class=&quot;tm-copyright-link&quot;&gt;TemplateMo&lt;/a&gt;
            &lt;/p&gt;
          &lt;/footer&gt;
        &lt;/div&gt;
        &lt;!-- .container-fluid --&gt;
      &lt;/div&gt;
      &lt;script src=&quot;~/theme1/js/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;~/theme1/js/parallax.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;~/theme1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;~/theme1/slick/slick.min.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
        $(function () {
          $(&quot;.tabgroup &gt; div&quot;).hide();
          $(&quot;.tabgroup &gt; div:first-of-type&quot;).show();
          $(&quot;.tabs a&quot;).click(function (e) {
            e.preventDefault();
            var $this = $(this),
              tabgroup = &quot;#&quot; + $this.parents(&quot;.tabs&quot;).data(&quot;tabgroup&quot;),
              others = $this.closest(&quot;li&quot;).siblings().children(&quot;a&quot;),
              target = $this.attr(&quot;href&quot;);
            others.removeClass(&quot;active&quot;);
            $this.addClass(&quot;active&quot;);
            $(tabgroup).children(&quot;div&quot;).hide();
            $(target).show();
  
            // Scroll to tab content (for mobile)
            if ($(window).width() &lt; 992) {
              $(&quot;html, body&quot;).animate(
                {
                  scrollTop: $(&quot;#first-tab-group&quot;).offset().top,
                },
                200
              );
            }
          });
  
          $(&quot;.tm-carousel&quot;).slick({
            dots: true,
            infinite: false,
            arrows: false,
            speed: 300,
            slidesToShow: 3,
            slidesToScroll: 2,
            responsive: [
              {
                breakpoint: 1024,
                settings: {
                  arrows: false,
                  slidesToShow: 2,
                  slidesToScroll: 1,
                  infinite: true,
                  dots: true,
                },
              },
              {
                breakpoint: 600,
                settings: {
                  arrows: false,
                  slidesToShow: 1,
                  slidesToScroll: 1,
                },
              },
              {
                breakpoint: 480,
                settings: {
                  arrows: false,
                  slidesToShow: 1,
                  slidesToScroll: 1,
                },
              },
              // You can unslick at a given breakpoint now by adding:
              // settings: &quot;unslick&quot;
              // instead of a settings object
            ],
          });
        });
      &lt;/script&gt;
      &lt;script src=&quot;~/js/site.js&quot; asp-append-version=&quot;true&quot;&gt;&lt;/script&gt;
  
      @RenderSection(&quot;Scripts&quot;, required: false)
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>When I run my application, my output is:
  <a href="https://i.stack.imgur.com/pJgev.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pJgev.jpg" alt="enter image description here" /></a></p>
  <p>when I giving routing for my application, then I found an unexpected output.</p>
  <p><a href="https://i.stack.imgur.com/TrG8F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TrG8F.png" alt="enter image description here" /></a></p>
  <p>my all picture and especially background picture was gone. what's the solution?</p>