How to load a background image from a database?

Question

I want to allow users to download pictures from SQL that will become their background while on my site.

I already use the uploaded pictures as foreground objects in various places, so I know the storage and the retrieval is working, which I normally DataBind() to an asp:FormView, but now I'm trying to use this image as the background in <body>, but <body> expects a URL string.

This is what I have. I'm having a difficult time with this one and couldn't find an answer.

<body style="background-image:url(<%# GetBodyStyle() %>">

Code-behind:

public object GetBodyStyle()
{
  object bodyBackgroundImageUrl = BodyBackgroundImageUrl;

  //Make adjustments
  return bodyBackgroundImageUrl;
}

I have another subroutine that gets my images from the DB called FetchImage, which returns a datatable:

protected object BodyBackgroundImageUrl
{
  get
  {
    DataCalls DataCall = new DataCalls();
    return DataCall.FetchImage("MyBackgroundImageID");
  }

How do you show the images on the FormView? What is your code there? — Shadow The GPT Wizard, Dec 31 '13 at 11:42
@ShadowWizard it is very easy. frmHeader.DataSource = DataCall.FetchImageByName(); frmHeader.DataBind(); — asus3000, Dec 31 '13 at 11:52
What is `frmHeader` exactly? How the image tag itself is defined in your markup? — Shadow The GPT Wizard, Dec 31 '13 at 11:54
For start, you need such HTML: `` then have the logic to fetch the image from database and output as raw stream in `Image.aspx`, based on the ID given. — Shadow The GPT Wizard, Dec 31 '13 at 12:17
@ShadowWizard Are you saying to create an .aspx page dynamically? Or did you mean use an image handler? (.ashx not .aspx) I use image handlers successfully already, but I use databinding with the asp:formview to make them work. — asus3000, Dec 31 '13 at 13:20
@ShadowWizard Ok, I get what you're saying. I've tried that, but using that without asp:formview which is data bound, it doesn't know of the data. Here is an example I use elsewhere, which works. But it is surrounded by an ASP:FormView that is databound. I don't know how to do this with a tag.
' );"> — asus3000, Dec 31 '13 at 13:35
The problem is getting the image to display. I have puId, the data is not bound without an asp:FormView control, which I can't use on a tag. I can use an asp:FormView control around a
, and bind it to the data, not . — asus3000, Dec 31 '13 at 13:45
Please take a look at this screen-shot: http://imgur.com/eIGT4ox Notice the tag, which doesn't display a picture. Notice the
tag below it which does. — asus3000, Dec 31 '13 at 13:47
But if you browse directly to `Handler.ashx?id=MyBackgroundImageId` what do you see? — Shadow The GPT Wizard, Dec 31 '13 at 13:49
The disconnect here is that
can and is bound through the formviewer, but isn't. How do I get that handler into the background-image without databinding it? — asus3000, Dec 31 '13 at 13:54
I didn't understand that the handler.ashx was actually created on the webserver until now. It's all making sense all of a sudden. — asus3000, Dec 31 '13 at 13:58
Cheers, if you solve this post your own answer and explain in the answer what you did, others might benefit from it. :-) — Shadow The GPT Wizard, Dec 31 '13 at 13:58
Cheers, I see you got answer with something similar to what you did. — Shadow The GPT Wizard, Dec 31 '13 at 14:03

score 0 · Answer 1 · edited May 23 '17 at 10:32

What I suggest is to create an Image Handler:

You can create it like the standard an "ashx" file

<%@ WebHandler Language="C#" Class="getImage" %>
 using System;
 using System.Web;

 public class BackGroundImageHandler : IHttpHandler {

     public void ProcessRequest (HttpContext context) {
         //return content from dabase and render image
        // probably using context.Response.BinaryWrite
     }

     public bool IsReusable {
         get  {
             return false;
         }
    }
 }

if you wish to have your own extension you generate a dll and configure it in the web.config like:

<configuration>
   <system.web>
     ...
     <httpHandlers>
      <add verb="*" path="backimage.img" type="Sample.BackGroundImageHandler, Sample" />
     </httpHandlers>

Using the code from your question and the ASHX solution:

<body style="background-image:url(BackGroundImage.ashx)">

Remember that you can configure the handler to access the session, and query string variables like:

<body style="background-image:url(BackGroundImage.ashx?id=something)">

You can find additional information here:

read image from folder and database

I now realize that I defined my problem wrong. The real problem is using this in a tag. I have used image handlers elsewhere, but can't seem to make them work in specifically. Please look at this screen-shot: http://imgur.com/cq0p7aQ The image handler on bottom works, the one on top doesn't because the tag is outside the FormView, which is bound to the database. The line commented-out works, but is hard-coded. — asus3000, Jan 01 '14 at 17:33
I can't remove the <% because I need to access a variable in the code-behind with c#. I managed to solve it. Thank you very much for your assistance and happy new year. — asus3000, Jan 01 '14 at 18:53

asus3000 · Accepted Answer · 2014-01-01T19:16:22.230

I managed to solve this with help from some of the readers, and with help from this page.

The real problem was that I couldn't access the database and use the variable it returned in the <body> tag. I already had image handlers being used in other places, but that wasn't working with the <body> tag. So here is what I did:

I wrote a stored procedure to get the ID of the image.

Then I changed the <body> tag to this:

<body id="MasterPageBodyTag" runat="server">

In the code-behind (C#) I added this:

  public HtmlGenericControl BodyTag
  {
    get
    {
      return MasterPageBodyTag;
    }
    set
    {
      MasterPageBodyTag = value;
    }
  }

In the Page_Load event I put this:

BackgroundImageID = DataCall.FetchImageIDByName(MySchoolName, "MasterBackground");
BodyTag.Attributes.Add("style", "background-image:" + "url(Handler.ashx?puid=" + BackgroundImageID.ToString() + ");");

Note: The FetchImageIDByName returns the ID from the stored procedure. There is an image handler called Handler.ashx.

And now it works. I'd like to thank everybody who gave me some of their precious time.. There is never enough of it. Best wishes in 2014.

score -1 · Answer 3 · edited May 23 '17 at 12:19

-1

 Try below link you might get your answer

Try this

edited May 23 '17 at 12:19

Community

1
1

answered Dec 31 '13 at 11:48

Brijesh Gandhi

560
2
10
27

No need for an answer just pointing to another resource. That's what comments are for, or flagging as duplicate. – Shadow The GPT Wizard Dec 31 '13 at 11:54
I had seen that thread previously and spent hours trying to manipulate the code for database retrieval, but didn't arrive at the answer. The problem with using the code in your link is that it doesn't fetch the picture from a database, it fetches from URL's. – asus3000 Dec 31 '13 at 11:58

How to load a background image from a database?

3 Answers3