title: JSF Dynamic Image as div Background
body: <p>I generate dynamic images from a backend database using streamed content. They work fine when used with p:graphicImage.</p>
  
  <p>The issue comes when such a dynamic image needs to be the background of div.</p>
  
  <p>How can I use dynamic images created with stream content as a background of a div element?</p>
  
  <p>JSF Controller</p>
  
  <pre><code>public StreamedContent imageByCodeInlineWithoutGet(String code) {
      FacesContext context = FacesContext.getCurrentInstance();
      if (context.getRenderResponse()) {
          return new DefaultStreamedContent();
      } else {
  
          String id = code;
          if (id == null) {
              return new DefaultStreamedContent();
          }
          String j = "select s from Upload s where lower(s.code)=:id";
          Map m = new HashMap();
          m.put("id", id.trim().toLowerCase());
          Upload temImg = getUploadFacade().findFirstByJpql(j, m);
          if (temImg != null) {
              byte[] imgArr = null;
              try {
                  imgArr = temImg.getBaImage();
              } catch (Exception e) {
                  return new DefaultStreamedContent();
              }
              if (imgArr == null) {
                  return new DefaultStreamedContent();
              }
              StreamedContent str = new DefaultStreamedContent(new ByteArrayInputStream(imgArr), temImg.getFileName());
              return str;
          } else {
              return new DefaultStreamedContent();
          }
      }
  }
  </code></pre>
  
  <p>Generating Images Dynamically</p>
  
  <pre><code>                                &lt;p:graphicImage cache="false"  value="#{streamedContentController.imageByCodeInlineWithoutGet('header__logo')}"  &gt;
                                  &lt;/p:graphicImage&gt;
  </code></pre>
  
  <p>I want to use the image as a css background like below</p>
  
  <pre><code>                        &lt;style type="text/css"&gt;
                              background-image:#{streamedContentController.imageByCodeInlineWithoutGet('header__logo')};
                          &lt;/style&gt;
  </code></pre>
  
  <p>or Passing as a parameter.</p>
  
  <pre><code>                    &lt;div class="hero__item set-bg" data-setbg="#{streamedContentController.imageByCodeInlineWithoutGet('header__logo')}"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>Is it possible with JSF or PrimeFaces or any other library ?</p>