Changing the (CSS) background image at runtime.

Flow
1

On BlackBeltFactory.com, you see a asian woman with a sword on the background.

This is done thanks to this CSS fragment in our theme style.css:


.center {
	background: #FFFFFF url(image/bgphoto/asianWomanSword.jpg) scroll no-repeat right bottom;
}

I’d like to change the image from time to time. Let’s imagine that every day, at midnight, I’d like to change that image for 1h automatically, then restore the previous one.

How would you do ?

Here are a a few approches that I’ve imagined:

  1. Override com.vaadin.terminal.gwt.server.AbstractApplicationServlet.serveStaticResourcesInVAADIN(…) method just to change the filename if it’s midnight, then call the super method. Unfortunately, the method is private instead of protected (=> not possible to override).

  2. issue a file copy to change the file on the file system with a batch job.

  3. write a servlet to serve the file, and tell the servlet name instead of the file name in the css.

I’m not sure to like any of these options.
Subsidiary question: Won’t the browser cache interfer?

Thanks a lot!

2

Hi,

If you’re always changing to between the same images, or a set of images that are known in advance, I’d change the stylename; “center” to “center-2” or whatever (or add an additional stylename if .center is used in many css rules).

If possible, it’s better to change the name of the file instead of changing the file - for caching, and because showing a viking man with axe would be strange when asking for asianWomanSword.jpg :wink:

Best Regards,
Marc

3

I was intuitivaly convinced there was a simpler solution than the 3 I was proposing.

Thank you so much, Marc!

4

Hi, I didnt want to open a new Thread, cause my Question is kind of similar…

I also need to change the CSS Background Image at Runtime. But in my Case the User should have the possibilty to Upload their own Background Image via the Vaadin Upload Widget.

I made a Dummy.png Image in my VAADIN/themes/pos/images dir an added it as a Layout Style in my Style.css. So i thought it would do it to override the Dummy.png with the uploaded Image. The Path i used was app.getContext().getBaseDirectory.toString + “/VAADIN/themes/pos/images/Dummy.png”. But the Path i used is probably not the same, as where Vaadin get their Images from on Runtime… It actually override the Image in this dir how i wanted, but the Background in the Application poped up with the old Dummy.png.

Any Idea to make this work without rebuildung the whole .war ?