This discussion is archived
3 Replies Latest reply: Jan 17, 2013 8:20 AM by mario1977 RSS

CSS background-image: BLOB

732666 Newbie
Currently Being Moderated
good day people
I wanted to know how to display a blob field as a background image of a div.

How can an image (jpg) file saved as a blob be output/displayed in a Web page using PL/SQL procedure. The hpt.prn does not work.

In a region type PL / SQL (anonymous block) I have:


<pre>
declare
cursor cr_cursor is
select ID
, BACKGROUND
, FILENAME
, MIMETYPE
, LAST_UPDATE_DATE
from CFG_BACKGROUND;
v_style VARCHAR(4000);
begin
v_style := '<style>';
FOR v_cursor IN cr_cursor LOOP
v_style := v_style||'.slide_'||v_cursor.ID||'{background:url('||v_cursor.FONDO )||') no-repeat 0 0;}';
END LOOP;
v_style := v_style || '</style>';
htp.print(v_style);
end;
</pre>



the result I want is this:

*<style>*
*.slide_1 { background-image:url(image.jpg) no-repeat 0 0;}*
*.slide_2 { background-image:url(photo.jpg) no-repeat 0 0;}*
*.slide_3 { background-image:url(image_one.jpg) no-repeat 0 0;}*
*.slide_4 { background-image:url(image_dog.jpg) no-repeat 0 0;}*
*</style>*

Edited by: e:// on 24/09/2010 13:46

Edited by: e:// on 24/09/2010 13:46
  • 1. Re: CSS background-image: BLOB
    fac586 Guru
    Currently Being Moderated
    First of all, the CSS syntax isn't quite right. The <tt>background-image</tt> property only specifies the URL of the background image. To specify the <tt>background-position</tt> and <tt>background-repeat</tt> as well, use the <tt>background</tt> shorthand property.

    Secondly, there are syntax errors in the PL/SQL region code:
    v_style := v_style||'.slide_'||v_cursor.ID||'{background:url('||v_cursor.FONDO )||') no-repeat 0 0;}'; 
    There's no <tt>FONDO</tt> member in the cursor record, and it's followed by a misplaced ')'...

    Thirdly (and probably most important), the URL needs to point to a resource that will actually download the image to the browser. An On-Demand Process can be used for this:

    1. Create application item <tt>ODP_CFG_BACKGROUND_ID</tt> to use as an image ID parameter for the ODP.

    2. Create the <tt>ODP_CFG_BACKGROUND</tt> on-demand application process:
    declare
    
      l_background  cfg_background.background%type;
      l_mimetype    cfg_background.mimetype%type;
      l_filename    cfg_background.filename%type;
    
    begin
    
      select
                bg.background
              , bg.mimetype
              , bg.filename
      into
                l_background
              , l_mimetype
              , l_filename
      from
                cfg_background bg
      where
                bg.id = :odp_cfg_background_id;
    
      owa_util.mime_header(l_mimetype, false);
      htp.p('Content-Length: ' || dbms_lob.getlength(l_background));
      htp.p('Content-Disposition: filename="' || l_filename || '"');
      owa_util.http_header_close();
      wpg_docload.download_file(l_background); 
    
    end;
    3. Rewrite the PL/SQL region code to generate URLs to the ODP:
     begin
    
      htp.p('<style type="text/css">');
    
      for bg in (select to_char(id, 'tm9') id from cfg_background)
      loop
        htp.p(
             '.slide_'
          || bg.id
          || ' { background: url(f?p=&APP_ID.:&APP_PAGE_ID.:&APP_SESSION.:APPLICATION_PROCESS=odp_cfg_background:N::odp_cfg_background_id:'
          || bg.id
          || ') 0 0 no-repeat; }');
      end loop;
    
      htp.p('</style>');
      
    end;
    Note also that <tt>style</tt> is only valid within the page <tt>head</tt> element, so unless the page template contains a suitably placed region position a PL/SQL region may not be the best way to deliver the style sheet...
  • 2. Re: CSS background-image: BLOB
    732666 Newbie
    Currently Being Moderated
    thanks for the solution.
  • 3. Re: CSS background-image: BLOB
    mario1977 Newbie
    Currently Being Moderated
    Hi Paul J MacMillan,
    It works very well !
    But it doesn't work for the login page.
    I guess login page cann't call an application process... Is there a shorcut to get this ?
    Thank you very much !

    Edited by: mario1977 on Jan 17, 2013 11:20 AM

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points