Changing div background-image with code behind

  • Thread starter Thread starter Denny
  • Start date Start date
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.
 
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).
Click to expand...

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.
 
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).
Click to expand...

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.
 
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
 
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
 
Hi Denny,
Thanks for your input but still having the same problem.
Click to expand...

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
 
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.
 
Hi Denny,
As usual, I got pulled into another project. I will give your code a try. I
now understand what you are describing.
Click to expand...

Have you tried it? Can it work?

Regards,
Allen Chen
Microsoft Online Support
 
Back
Top