Home/ Questions/Q 6736219
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:06:16+00:00

I have got a category – model which i am using it for my

  • 0

I have got a category – model which i am using it for my eCommerce system , I have a fixed background image for each category added , What i want to achieve is to programatically add different background image for each category added. Below is the code , currently i am adding images through css.

@using Nop.Web.Models.Catalog;
@if (Model.Count > 0)
{
<div class="home-page-category-grid">
    @(Html.DataList<CategoryModel>(Model, 5,
            @<div class="item-box">
                <div class="category-item"> @*Thats where i am adding background-images in the class category-item*@
                    <h2 class="title">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            @item.Name</a>
                    </h2>
                    <div class="picture">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            <img style="border-width: 0px;" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl"
                                title="@item.PictureModel.Title" /></a>
                    </div>
                </div>
            </div>
        ))
</div>
<div class="home-page-category-grid-separator"></div>

}

Css for Category -Item

.home-page-category-grid .category-item
{
text-align: center;
margin: 10px 0px 35px 4px; /*width: 150px;*/
width: 166px; 
height: 185px; 
background: url('images/picture-bg.png') no-repeat 0 100%;
}

Any suggestions or alternatives will be highly appreciated , i just need to add different background images for each category items , At present the background image is fixed in the category-item class used by datalist.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would just use multiple CSS classes, one for the general background image styles and then an individual one for each of the categories that just has the specific background-image style set with the correct image reference.

    something like this:

    @using Nop.Web.Models.Catalog;
@if (Model.Count > 0)
{
<div class="home-page-category-grid">
    @(Html.DataList<CategoryModel>(Model, 5,
            @<div class="item-box">
                <div class="category-item category-@item.Id"> @*Thats where i am adding background-images in the class category-item*@
                    <h2 class="title">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            @item.Name</a>
                    </h2>
                    <div class="picture">
                        <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title">
                            <img style="border-width: 0px;" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl"
                                title="@item.PictureModel.Title" /></a>
                    </div>
                </div>
            </div>
        ))
</div>
<div class="home-page-category-grid-separator"></div>

    See how I added category-@item.Id to that same class declaration? You can also use something more semantic like the category name if you’ve got one, etc. Then you can do this in the CSS:

    .home-page-category-grid .category-item
{
    text-align: center;
    margin: 10px 0px 35px 4px; /*width: 150px;*/
    width: 166px; 
    height: 185px;
}

.home-page-category-grid .category-item .category-1
{
    background: url('images/picture-bg-1.png') no-repeat 0 100%;
}

.home-page-category-grid .category-item .category-2
{
    background: url('images/picture-bg-2.png') no-repeat 0 100%;
}

    There are some other alternatives as well, specifically if you don’t know the image url until the loop executes… in which case I would just use a style attribute with a value of background-image:url(@item.BackgroundImage).

    • 0