Solved

How do you dynamically specify a backgroun image to a <DIV>?

Posted on 2006-06-28
16
296 Views
Last Modified: 2007-12-19
How do you dynamically specify a backgroun image to a <DIV>? I use ASP.NET 2.0 (C#) in VS2005.
0
Comment
Question by:chuang4630
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 3
16 Comments
 
LVL 27

Expert Comment

by:Sammy
ID: 17004876
run the Div at server and use something like this

this.myDiv.Style.Add("background", "url(rightBorder.gif) repeat-y right");

of course change myDiv to match your Div ID and this has to be placed in page load

HTH
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17004905
What does "repeat-y right" for?
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005007
I added this line but it does not work. For test purpose, I added this in the buton exception handler.
I also view the source of the page, the style has no change at all.

0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 27

Expert Comment

by:Sammy
ID: 17005187
repeat is for the image to repeat itself based on the X and Y coodinates of the browser
it has to be added in page load
If you have a div called test and add the code I provided for you, run the page and the source would show this

<div id="test" style="background:url(rightBorder.gif) repeat-y right;">
    <p>Test div</p>
    </div>
    <div>
make sure your image is stored in a proper directory in order for it to work

HTH
0
 
LVL 27

Expert Comment

by:Sammy
ID: 17005202
if you want to do another test try it with this image
this.test.Style.Add("background", "url(http://webdivisions.net/Images/banner.gif) repeat-y right");
you will see the image strech and aligned to the right

HTH
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005231
It works now. The problem is about the event handler.

Is it possible to "FEED" the image from memory rather than load from file system?
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17005233
use a panel

it is the equal to div then you can set the Panel1.BackImageUrl, this is the easiest way.
0
 
LVL 27

Expert Comment

by:Sammy
ID: 17005256
You should be able to feed the image from memory if you plug in the outout to a variable and replace the url(myvar). but why create the extra work?
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17005268
opps you go it working already...

from memory
http://aspalliance.com/726
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005475
panel is not desirable since it mess up the page on FireFox.
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005490
http://aspalliance.com/726: commercial product of netCharting?
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005519
This is a document review application. Each document has its own watermark in the background. It has to be created dynamically. It is done. The remaining issue is to "FEED" it to the browser as a background. The backup plan is to ssave it on the file system and let the browser to load it up. It is done, thanks to Sammy's suggestion. The drawback is the scalability and the concurrency. The best way is to feed the image from memory. The memory will be reclaimed once it is done.

Is there any sample?
0
 
LVL 27

Expert Comment

by:Sammy
ID: 17005559
try to stream the image like its done here
http://www.eggheadcafe.com/articles/20050911.asp
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005608
But how do you stream the image to Background (or background style sheet)?
0
 
LVL 27

Expert Comment

by:Sammy
ID: 17005674
how are you streaming the image?
the image should be saved in the stream so how and given a name, you can use that name in the url.
I have to leave now but if you want, post your stream code and I will take a look at it at a later time. in case I dont make it I am sure there are a lot of guys who can help once they see the stream code
0
 
LVL 12

Accepted Solution

by:
deanvanrooyen earned 500 total points
ID: 17015081
please take a look at this for some javascript manipulations from file


aspx page
////////////////////////////////////
<%@ Page Language="C#"  AutoEventWireup="true" CodeFile="div.aspx.cs" Inherits="div" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript">
function getObj(name)
{
  if (document.getElementById)
  {
        this.obj = document.getElementById(name);
      this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
      this.obj = document.all[name];
      this.style = document.all[name].style;
  }
  else if (document.layers)
  {
         this.obj = document.layers[name];
         this.style = document.layers[name];
  }
}
function changeDiv(col)
{
      var x = new getObj('q');
      x.style.height = 200;
      x.style.backgroundImage = 'url(' + col +')'
}
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="q">
        <br />
        <a  href="javascript:changeDiv('IMG_0413.jpg');" title="color">html change color anchor</a>
        <br />
        <asp:HyperLink ID="HyperLink1" runat="server">HyperLink control change color anchor</asp:HyperLink>
        <br />
        <a  href="javascript:changeDiv('');" title="color">clear div</a>
        </div>
    </form>
</body>
</html>

code behind
////////////////////////////

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class div : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            string image = "IMG_0413.jpg";
            string js = "changeDiv('" + image + "')";
            this.HyperLink1.Attributes.Add("href", "javascript:" + js);
        }
    }

}

0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question