How to add a full page image on main page under the Navigation links in Shopify (Liquid markup)?

Question

Everyone, I am new to liquid markup language. I am creating a ecommerce shopify website and placed a full page Image on the top half of the page (right under Navigation links) It looks great but the only problem is when you click on another page the image is fixed on that page as well.

I would only like this image on the Main Page of my website, Would anybody be able to help me with this issue?

Here is the link to the actual site: http://starpro-greens.myshopify.com/

And Here is my code for this Image:

HTML (Placed in theme.liquid under Layouts tab):

 <div class="grid__item large--two-thirds large--display-table-cell         medium-down--hide">
          {% include 'site-nav' %}
        </div>
      </div>
    </div>
  </header>

      <div class="imagetop">
        .



  <div class="grid__item large--four-fifths bg ">

          {{ content_for_layout }}
        </div>
      </div>

CSS (Placed in theme.scss.liquid under Assets tab):

.imagetop{
    background-image: url({{ 'top.png' | asset_url }});
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 250px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #000;

Steph Sharp Steph Sharp · Accepted Answer · 2015-10-14T10:49:45

You can wrap the code that displays the image in an if statement like this:

{% if template contains 'index' %}
    Your code to display the image goes here...
{% endif %}

See this similar question and the Shopify docs on Alternate Templates for more info.

How to add a full page image on main page under the Navigation links in Shopify (Liquid markup)?

1 Answers