I am making a wordpress theme at the moment and to keep up with current trends I adding options to the theme customizer.
One of the options I've created is a background image uploader, the image uploads and even inserts to my site - however I'm using jQuery to make these changes appear in realtime and I've got a bit stuck.
Here is my JS for the image uploader to work in real time:
// BACKGROUND IMAGE
wp.customize( 'front_page_background_image', function( value ) {
value.bind( function( to ) {
$( '#banner' ).attr( 'style', function() {
return 'background-image' : to ;});
} );
});
What this does however is just return the following html:
<section id="banner" style="background-image"></section>
What I can't figure out is how to get the url of my image in the 'style' parameter. I knw that I can call the url using code like this:
// BACKGROUND IMAGE
wp.customize( 'front_page_background_image', function( value ) {
value.bind( function( to ) {
$( '#banner' ).html( to );
} );
});
This will output
<section id="banner">[URL OF MY UPLOADED IMAGE]</section>
So I know it's possible to get the url, I just can't get it in the right place. What I need it to say is
<section id="banner" style="background-image:url=([URL OF MY UPLOADED IMAGE]);"></section>