Search code examples
cssprototypejs

Dynamically change background pattern on page load w/ prototype


Similar to Twitter, I am trying to allow a user to upload their own background pattern/image. I am wondering what the best way to dynamically change the background pattern on page load is. I am using prototype w/ rails and have been testing by putting the following in my main layout page:

<body id="pattern">
     <script type="text/javascript"> 
      document.observe('dom:loaded', function(){
        $('pattern').setStyle("background-image:url('/images/patterns/pattern.png');")
      })
    </script>
</body>

This is buggy b/c a different background color loads before it is changed with the javascript. Is there a way to change the css even earlier than the dom:loaded event? Is this the right general approach?


Solution

  • If you don't care about keeping your javascript organized unobtrusively, then as long as your script appears after the $('.pattern') element, you can target it directly without waiting for the rest of the document to get dom:loaded.