Solved

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

Posted on 2006-06-28
16
291 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

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…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
This Micro Tutorial will give you a basic overview how to record your screen with Microsoft Expression Encoder. This program is still free and open for the public to download. This will be demonstrated using Microsoft Expression Encoder 4.
This is used to tweak the memory usage for your computer, it is used for servers more so than workstations but just be careful editing registry settings as it may cause irreversible results. I hold no responsibility for anything you do to the regist…

910 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now