• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 425
  • Last Modified:

Add BackgroundImage for DIV from .net Backend

Hello Experts,

I have Div in Front end like this.

<div id="frontDiv" style="float:left;">

I want to give background image from .net backend Like this

DivFront.Attributes.Add("style", "background-Image:url(http://localhost/Templates/Products/POD/VCA/dog.JPG)");

but it's not taking background image for that DIV.I really don't know is there any other method for giving background-image for DIV.

Please guide me in this.
  • 2
1 Solution
Is there any specific reason for assigning background color to div from code behind?

Better approach is using CSS.

Here is exmple:

<style type="text/css">
.testDiv {background-image:url('paper.gif');}

<h1>Hello World!</h1>
<div class='testDiv' style='height:200px;'>test data in div

Open in new window

Is still you want to use it from code behind then you have to make that div as server side control so that you can access it from code behind or simply you can take Panel control and use it's "BackImageUrl" property to assign background image.
Add runat="server" and then you will be able to access it in your code behind file:-

<div id="frontDiv" style="float:left;" runat="server">

Next check that this url does show up the image and not 404 error.
Ajay SharmaCommented:
Declare the DIV as server side control:

<div id="frontDiv" runat="server" style="float:left;" />

Now in the code behind file use below code:

frontDiv.Attributes.Add("style", @"background-Image:url(""" + Server.MapPath("/Templates/Products/POD/VCA/dog.JPG") + @""");
Ajay SharmaCommented:
Sorry, the code behind needs to be written as below:

frontDiv.Attributes.Add("style", @"background-Image:url(""" + Server.MapPath("~/Templates/Products/POD/VCA/dog.JPG") + @""");

Here the Templates directory should be in your root.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

7 new features that'll make your work life better

It’s our mission to create a product that solves the huge challenges you face at work every day. In case you missed it, here are 7 delightful things we've added recently to monday to make it even more awesome.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now