Background Image is not coming up in portlet

, ,
1

Hi,
In a portlet I am trying to add background image. For that in the CSS Style property i am using “background-image:” tag to display image. When i am using this tag and giving Image url then on designer it shows the image properly but when i publish it to the server and open this portlet then i do not see any image in the background.
Am i doing anything wrong? Instead CSS i tried it via html tag as well but did not work out.

If anyone is having any idea then please let me know.

2

Hi Vikas,

I am novice in CAF.

I suggest to check the image [alone] in browser to check the resource permission and availability.

HTH.

Thanks,
Rankesh

3

Hi Rankesh,
Thanks for your reply. Image is fine and no issues with permission. To check if image and permission is fine or not i used image control and given url to that image and after publishing the code when i open portlet on browser the it is working.
So not sure why it is not working in my scenario.

4

Hi All,
Is HTML not 100% supported in CAF? I am using Include HTML and tried output text with escape character as false but none of the control is displaying background images in the portlet but if i save same code with .html file and open it up directly on some browser then it is working fine.

Please let me know if CAF does not support HTML 100%.

5

You are probably using a relative URL for the background image. When you are including the HTML into the portlet, the URL would be relative to the wrong place.

Try using a url that is not relative to the page.

For example, instead of “images/your_img.gif” use “/wm_your_app_name/images/your_img.gif” instead.

6

Hi Eric,
Thanks for your reply. I tried absolute path as well. I got to know few things while i was trying to solve this issue.

  1. Whenever you publish your project to the server project name saves in lower case. (which i was not aware even i do no think it is mentioned any where in documentation).
  2. I created Images folder inside webcontent folder but in absolute path we should remove its entry.
    (As when i gave absolute path i gave my project name all in lower case though it was mix of lower and upper case. then Images directory then image file name and it worked.
  3. but still one thing which is still bothering me is that when i am applying CSS class and using background image tag it is not working.
    I’ve no idea now what is wrong if same piece of code is working in CSS Style property but if i include same thing in CSS class it is not working.
    If you have any idea then please let me know.

One thing which i learned from this is always create project name with lower case and if you create any folder/directory inside or outside webcontent then name it with lower case.

7

  1. Yes, MWS will use a lower-case servlet context path for any WAR file that has portlets in it.

  2. Can you share a snippet of what your CSS looks like?

8

Hi Eric,
Thanks for your help. My issue got resolved. I was using one tag which is not supported. Instead of “background-repeat” i was using just “repeat”. Worst thing is it does not tell the error but you have to figure it out.