Multiple Backgrounds within Single Element
Permalink
I stumbled upon this JS script and guide, and I absolutely had to share it. It's fantastic!
http://chicowebdesign.com/blog/wp-content/uploads/2010/10/multiple-...
For archival purposes (if that site goes down), I've copied the important parts of the guide and attacked the JS file. But for up-to-date code, check back with that site.
-------------------------------
NOTE: I had nothing to do with the writing of JS nor the guide. So I wouldn't be able to help you with any issues.
-------------------------------
Make sure jQuery 1.4.2 has already been called and add... to your theme.
Then in your theme's CSS file use CSS3 syntax with a slight adjustment for the non-compliant browsers:
Public Functions
---------------------
These are only required if you need to change the rules that are applied or apply the rules again (when loading DOM through AJAX for example).
$.fn.multipleBgReadCss(conts,prop,path)
Read in a block of CSS while looking for a multiple backgrounds
* conts—block of CSS to read in
* prop—which property to look for, only 'background' supported at this time
* path—path to prepend to image urls to make relatives work, pass false or "" to disable
$.fn.multipleBgApplyCss()
Apply loaded CSS properties to the elements on this page
$.fn.multipleBgApplyBg(selector,attr)
Apply a specific background to a selector/element.
* selector—selector/element to apply the background to
* attr—which state of the element to apply (Possible values: jQueryMultipleBgStaticSelector, jQueryMultipleBgHoverSelector, jQueryMultipleBgActiveSelector, jQueryMultipleBgFocusSelector)
$.fn.multipleBgRules
Access the loaded rules from initialization/add your new rules to this object
http://chicowebdesign.com/blog/wp-content/uploads/2010/10/multiple-...
For archival purposes (if that site goes down), I've copied the important parts of the guide and attacked the JS file. But for up-to-date code, check back with that site.
-------------------------------
NOTE: I had nothing to do with the writing of JS nor the guide. So I wouldn't be able to help you with any issues.
-------------------------------
Make sure jQuery 1.4.2 has already been called and add...
<script type="text/javascript" src="jquery.multiple-bgs.js"></script>
Then in your theme's CSS file use CSS3 syntax with a slight adjustment for the non-compliant browsers:
#ex1 { background: url(middle.gif) repeat-x 0 0; /* For unsupported browsers */ background: url(left.gif) no-repeat 0 0, /* For CSS3 Browsers */ url(right.gif) no-repeat 100% 0, url(middle.gif) repeat-x 0 0; }
Public Functions
---------------------
These are only required if you need to change the rules that are applied or apply the rules again (when loading DOM through AJAX for example).
$.fn.multipleBgReadCss(conts,prop,path)
Read in a block of CSS while looking for a multiple backgrounds
* conts—block of CSS to read in
* prop—which property to look for, only 'background' supported at this time
* path—path to prepend to image urls to make relatives work, pass false or "" to disable
$.fn.multipleBgApplyCss()
Apply loaded CSS properties to the elements on this page
$.fn.multipleBgApplyBg(selector,attr)
Apply a specific background to a selector/element.
* selector—selector/element to apply the background to
* attr—which state of the element to apply (Possible values: jQueryMultipleBgStaticSelector, jQueryMultipleBgHoverSelector, jQueryMultipleBgActiveSelector, jQueryMultipleBgFocusSelector)
$.fn.multipleBgRules
Access the loaded rules from initialization/add your new rules to this object
