Background-image not showing in layout box or panel
Background-image on a page
I'm using the 6.1.9GA release
I'm trying to use a image as a background on my main page layout box. I used the Custom style and insert the following:
background-image:url('/xxx/yyy.png');
this also generates the following code in the CSS
.Main .Main-layoutBox1 {background-image:url('/xxx/yyy.png');}
Nothing happen either at design time or run time.
I can pull in the yyy,png as a picture so I know that the image file is good
I also try to set the background-image in a panel and get no results.
Can someone please help me as I'm a newbie here and I can find no reason that this dose not work
Thanks
>>I'm using the 6.1.9GA release
Background Image for LayoutBox - example project
That should work
In the attached 619 export, I uploaded the background image using the resource manager, so my url starts with resources. Here's the Page CSS used:
.Main .Main-layoutBox1 {background-image:url('resources/images/cloud_background.gif');
}
The single quotes around the path are not required, but work with.
Of course the image path must be valid. Inspecting the element and testing the resultant URL is a good test.
Layout box background problem fix.
Thank You layout box background zip tests. The test zip project worked fine on my system with firefox.
The Problem:
I changed your image file for mine and ran wavemaker in test mode and got your cloud image. I then deleted your image file and ran the tests mode again. I still received the cloud image and not mine.
I stopped wavemaker and restarted it and ran you program with my image and once again I got your cloud. I added a button to the page and ran again. The Button showed and still your cloud image was in the back ground.
It then became apparent that wavemaker was keeping something somewere and not realy totaly recompiling the project. I do not know how to force wavemaker to recomplie no matter what. It did give me the code and appear to recomplie and reload the project.
The Fix:
I had not reboot my system and I did not close firefox as I have active tabs that I did not want to lose. I try one last thing and that was to go into firefox and flush the firefox catch. I then ran wavemaker and this time the modify file worked with my image. I also went back to my orgrinal project and ran it and it also worked as it should have. I do not know what other thing now may or may not work so we will have to retest everything. It dose appear that the images were being buffer in the firefox catch and not being updated.
Do you know what is being catch in firefox? Why is wavemake not clearing the firefox catch at the time that wavemaker starts? This seem to me as a bug that should be address.
Thank again for your quick help
Clear the Browser Cache
Browser Caches can be very troublesome in development.
WM appends the ?rand=XXXXX to URLs in order to prevent caching, but clear the cache remains a staple of browser development.
I configure Firefox to not use caching at all on my development machine. Eliminates the need to always be clearing the cache when doubts arise. See:
http://dev.wavemaker.com/wiki/bin/Dev/TNT08