Adding Different Background Images for each category added into a model using Razor - asp.net-mvc

Question

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.

Answer 1

You can do this if you have the stylesheet definition in your view, not in an css file. Css files are, basicly, static files like html. If you want to get some dynamic things to that you have to do it in server side code. Maybe confusing what i say.. but check my sample and you understand what i mean.... i hope ;)
// Your View
<style>
body
{
background-image: url('#ViewBag.ImagePath');
}
</style>
// your action method
public ActionResult ActionName()
{
ViewBag.ImagePath = "<path to your image">
return View();
}

Answer 2

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).

Answer 3

Using samandmoore's answer, you can also do this entirely in the View, with the source of the image based on the requested URL (using #Request.RawUrl):
<div class="parallax bg-image-#Request.RawUrl.Replace('/', '-')" >
<section class="page-title">
<div class="container">
<h2>#Html.Raw(ViewBag.Title)</h2>
</div>
</section>
</div>