Hero image - use full width - no seach bar


6 Kommentare

  • Celine Ladoire

    Hi Shobhit,

    I'm not sure if you mean adding a second hero image above the existing one, or if you're asking about the width of the existing one, but if you're talking about the one behind the search, I think you can edit that in the CSS:

    /***** Hero component *****/

    .hero {
    background-image: url($homepage_background_image);
    background-position: center;
    background-size: cover;
    height: 350px;
    padding: 0 20px;
    text-align: center;
    width: 100%;

    Does this help?

  • Nicole Saunders
    Zendesk Community Team

    Thanks for jumping in, Celine!

  • Shobhit Patel

    @Celine, Thank you for your help. I want to add like a banner image before the search. 


  • Celine Ladoire

    @Shobhit, not sure I fully understand, but if you want to just have one hero image (and not add a new one on top of it), then, wouldn't moving the search down until it's below the hero image solve the issue?

  • Shobhit Patel

    Celine, I got it. I was using older them so my code wasn't behaving exactly as expected. However, do you know can i do to add another banner that cover bottom of the page (above footer) using 100% width. I tried setting container to 100% width but it's inherting the width from main.  I tried setting new classes as well. 

  • Celine Ladoire

    @Shobhit, is this for all pages (ie general footer), or is this for homepage only?

    Please bear in mind I haven't tested this myself, but you could try:


    Go to footer.hbs

    Add a div with the banner above <footer class="footer"> (ie right at the top of the edit code box) if you haven't touched the footer before.

    Play around with it. You might need to add a class in the CSS for this if you want it to behave different from the footer? Otherwise I would think you can just add class="footer" to your new div?


    Same as above, but in the home_page.hbs and at the end of the code instead?

    Hope that helps, but again, I haven't tested any of this I'm afraid.



Post ist für Kommentare geschlossen.

Powered by Zendesk