Best way to change background images - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Best way to change background images

  • Best way to change background images
  • Hi,

    i´am new in Sitefinity. We would build a template where the background image change based on "day time" and on "four seasons". How can i overwrite the css from a Template main.css with jquery.


    PS: Hope for some ideas
  • Hey TMatt,

    You could do something like this:
    // change background depending on user's time
    datetoday = new Date();
    timenow = datetoday.getTime();
    thehour = datetoday.getHours();
    if (thehour >= 18)
    else if (thehour >= 15)
    else if (thehour >= 12)
    else if (thehour >= 7)
    else if (thehour >= 0)

    And define background images based on the classes...

  • Thanks for the tip,

    i have now runnig some code like you posted.My question where is best place for the script.

    I have no luck with script on website when i add the classes in main.css.
    Only when i place the classes on page with css widget i get the results.
  • @TMatt,

    That's because of the loading order. This script needs to be executed before the .CSS (other wise the body won't have the extra class yet). And since the snippet is jQuery, jQuery needs to be loaded prior to that.

    So you first load jQuery, then load the script (set it to run at the head) and use the CSS rules in your main.css. Or set the script to run before the closing tag and add a styling widget onto the page and define the css rules on the widget.

    The option script at the bottom runs faster because it doesn't halt page execution, the option with script at the top is 'cleaner' from a developer/maintenance perspective. so basically its up to you what works best...