0

My questions is similar to the question given here

I am trying to add an background image to the <table> component which is inside an <p:panel>

I tried lot of soluitons including the one given below but no luck.The background image is not applied in the table.

table {
    width: 300px;
    background-image: url('mypic.png');
    background-repeat: no-repeat;
    background-position: center top;
}


In my workspace, the image that I am trying to provide in the background is located under
C:\workspaces\Project\WebContent\resources\images\mylogo.jpg
Please let me know how to add background image to a <table> which is inside an <p:panel> in XHTML file.

Thanks in advance.

Community
  • 1
  • 1
Karthik
  • 371
  • 3
  • 7
  • 30

2 Answers2

0

In pure CSS,

if you declare :

background-image: url('mypic.png');

your image must be relative to your CSS file. It can only work if the CSS file and the image are in the same folder.

In JSF2,

CSS and resources are handled by the JSF layer for convenience. Resources must be placed in the "WebContent/resources" folder and accessed with EL:

background-image: url(#{resource['images:mypic.png']});
Stephane Lallemagne
  • 1,246
  • 11
  • 21
  • @Stephane.Thanks a lot for your suggestions.I resolved the issue by adding