Design and CSS styles
Version 7.x > Design and CSS styles > Random background image / matching color page load? View modes: 
User avatar
Member
Member
dbraun-pediatricweb - 10/25/2012 3:42:31 PM
   
Random background image / matching color page load?
Hi, I would like to know how to implement a random background image with matching color on each page load. Everytime a user loads the page, there should be a different background image AND different matching background color (the image vignettes into the background).

Many thanks for help

User avatar
Kentico Support
Kentico Support
kentico_janh - 10/25/2012 4:33:48 PM
   
RE:Random background image / matching color page load?
Hello,

I would recommend you to create a table with pairs of values (one as a path to an image and the other as a background color) and then I would create a custom macro, which would randomly picking rows from that table and combines background with appropriate matching colors. If you don't want to create those pairs, you can implement some complex logic, which would go through those pictures and which would find most used color and then set this color as a background. I have found some related articles to this, so you can take a look:

http://stackoverflow.com/questions/4427200/getting-the-most-common-color-of-a-image
http://stackoverflow.com/questions/4598648/obtain-the-most-used-color-in-png
http://www.sitepoint.com/forums/showthread.php?610878-How-to-get-the-main-color-from-an-image

Best regards,
Jan Hermann

User avatar
Member
Member
dbraun-pediatricweb - 10/31/2012 12:13:01 PM
   
RE:Random background image / matching color page load?
Can you recommend how to load a random background image ONLY for each page refresh?

User avatar
Kentico Customer Success
Kentico Customer Success
kentico_martind2 - 11/4/2012 2:39:32 AM
   
RE:Random background image / matching color page load?
Hi,

You can handle this behaviour via JavaScript, e.g.:
1. Cut & Paste Random Background Image
2. Impossibly simple image randomizer with jQuery

Please let me notice: I would't recommend you to change the background image on every refresh. I think that for users it could be confusing or annoying. But maybe you have a reason for that...

Best regards,
Martin Danko