Add a background image on the category blocks

2 コメント

  • Pulkit Pandey
    Community Moderator

    Hi Ronit

    Please replace the below code with your code and follow steps to add a background image on the category blocks 

    {{#if ../has_multiple_categories}}
    <li class="blocks-item" id="{{id}}">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    <span class="blocks-item-description">{{excerpt description}}</span>

    Step: 1 - Now, at the bottom of this homepage paste the below code -

    Note: if you are using the v2 version of the theme please add the following line of code at the top of you document_head template

    <script src=""></script>
    $('.blocks-item').each(function (idx, itm){
    var categoryID = $(this).attr('id');

    if ( categoryIcons[categoryID] !== undefined ) {
    $(itm).css('background-image', 'url(' + categoryIcons[categoryID] + ')');

    Step: 2 - Go to document_head.hbs and paste the below code at the bottom. Replace ID with your category ID or section ID. Also, replace assets with your assets.

    var categoryIcons = {
    "360003749913" : "{{asset 'London_2012_Olympic_Games_Wallpapers_03.jpg'}}", // Image for first category
    "ID" : "{{asset 'bg-2.png'}}" // Image for second category

    Note: ID replace it with your category ID or section ID to set an image, In my case i have
    Replace the ID with my category ID i.e 360003749913

    Step: 3 - Paste the below CSS at the bottom of your style.css

    li.blocks-item.changeUI {
    background-size: cover;
    background-position: center;
    border: 1px solid #000;
    color: #000;
    height: 180px;
    justify-content: flex-end;
    position: relative;

    .changeUI .blocks-item-link {
    height: 100%;
    padding: 0;

    Let me know if this solves your issue.



  • Ronit

    Thanks @pulkit, it works like the way I want
    Thanks once again



Powered by Zendesk