3 Replies Latest reply: Jan 17, 2013 10:20 AM by mario1977 RSS

    CSS background-image: BLOB

    e://
      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
          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
            e://
            thanks for the solution.
            • 3. Re: CSS background-image: BLOB
              mario1977
              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