Solved

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

Posted on 2006-06-28
16
294 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
  • 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
Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This tutorial gives a high-level tour of the interface of Marketo (a marketing automation tool to help businesses track and engage prospective customers and drive them to purchase). You will see the main areas including Marketing Activities, Design …
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

773 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