Changing div background-image with code behind

D

Denny

Hello,

I'm running into a problem that I think should be easy. Currently I have a
Div (container) that is getting its height and background-repeat from an
external CSS file.

What I need to do is change the background-image value at runtime. I've
tried to give the DIV runat="sever" attribute then use the
Attributes.Add("style", "background-image=url(" + ImagePath + ")"), but then
it ignores the external CSS file (height & background-repeat).

Any help would be appreciated.
 
A

Allen Chen [MSFT]

Hi Denny,
What I need to do is change the background-image value at runtime. I've
tried to give the DIV runat="sever" attribute then use the
Attributes.Add("style", "background-image=url(" + ImagePath + ")"), but then
it ignores the external CSS file (height & background-repeat).

Could you try this to see if it works?

Attributes.Add("style", "background-image:url(" + ImagePath + ")")

Please note we shall use "background-image:" instead of "background-image=".

If it still doesn't work please send me a demo project that can reproduce
this issue. My email is (e-mail address removed) update here after
sending the project in case I missed that email.

Regards,
Allen Chen
Microsoft Online Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

Note: MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 2 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions. Issues of this
nature are best handled working with a dedicated Microsoft Support Engineer
by contacting Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.
 
W

William Niver

I've been known to be wrong, but I'm fairly certain it should be:

Style.Add("background-image", "url('" + ImagePath + "')")

rather than:

Attribute.Add(stuff, morestuff)

Hope that helps!

William
 
A

Allen Chen [MSFT]

Hi Denny,
Thanks for your input but still having the same problem.

Thanks for your update. I've received your demo. The root cause is:

You're using file scheme for the URL of the image, which cannot be
recognized by the browser:

protected void Page_Load(object sender, EventArgs e)
{
string ImagePath = "C:\navbar.jpg";
container.Attributes.Add("style", "background-image:url(" +
ImagePath + ")");
}

Try to use relative URL instead, like below:

protected void Page_Load(object sender, EventArgs e)
{
string ImagePath = "navbar.jpg";
container.Attributes.Add("style", "background-image:url(" +
ImagePath + ")");
}

In addition, put navbar.jpg in the root directory of your project.

Another issue is the CSS and id of <div>. You're using this CSS:

#container
{
height: 773px;

background-repeat: repeat-y
}

and the <div> is set as runat="server". In this case, the rendered id of
<div> is not what you specified in aspx.

The recommended way is to use this CSS:
container
{
height: 773px;

background-repeat: repeat-y
}

and use class attribute of <div>:
<div id="container" runat="server" class="container">

or use Panel control instead:
<asp:panel CssClass="container" ID="container" runat="server">


Start debugging and you'll see it works.


Regards,
Allen Chen
Microsoft Online Support
 
A

Allen Chen [MSFT]

Hi Denny,
Thanks for your input but still having the same problem.

Have you tried my code? Can it work?

Regards,
Allen Chen
Microsoft Online Support
 
D

Denny

As usual, I got pulled into another project. I will give your code a try. I
now understand what you are describing.

Thanks for your help.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top