Hi ,
I am displaying categories on my homepage. The current theme provides you with the fixed greyish background when each category is added, i have got 16-20 categories and i want different background image for each category , Below is the razor snippet used to display the categories on the hompage:
@model IList<CategoryModel>
@using Nop.Web.Framework.UI;
@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">
<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>
}
I have checked the css , class category-item has got the background image , how can i get different background when each category is added.