Set background CSS of a Div depending on select

Question

I have a small jquery which I have set to change the foreground image of crystal colours to a chosen design. (to start the design you need to first select the leather colour and the pattern.)

http://www.pinkequine.com/shop/pesport_bespoke.php

But I am stuck with changing the background CSS of the padding tab which changes the leather colour. If there is no image, I'd like to set the div Brown1 to the default image.

If it were a foreground image I'd do this, but as its a background CSS change I dont know what to put in sections 2 and 3. Can anyone help?

Thank you in advance. Denise

//#BROWN PIPING
 //1. on image change set the table cells to the correct colour   
     $("#paddingbrn").change(function() {

//2.sets the corresponding table cells to the selected images        
     if ( $("#paddingbrn").val()!="" ){
        $("#brown1").append("<img src=\"" + $("#paddingbrn").val()  + "\" />");  }
//3. If no image is found, then empty all the table cells           
        else{
        $("#brown1").empty();
     }$("#paddingbrn").live("change", function() {
            $("#pipingcolour").val($(this).find("option:selected").attr("name"));
   });
   });

thanks for letting me know that I have put a few .live on that jquery from previous answers I got on another similar jquery script, will need to change. — Denise Field, Feb 13 '15 at 12:30
this link may help http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property — AVM, Feb 13 '15 at 12:33

score -1 · Answer 1 · answered Feb 13 '15 at 12:25

-1

Changing background-image property in jquery can be done via

$('#selector').css("background-image", "url(/pathtoimage.jpg)");

Also, since you are using jquery 1.8 do not use .live() function. It's obsolete since 1.7. Use .on("change") instead.

answered Feb 13 '15 at 12:25

agoldev

2,078
3
23
38

This is not an answer. – lharby Feb 13 '15 at 12:27
//BROWN PIPING //on image change set the table cells to the correct colour $("#paddingbrn").change(function() { //sets the corresponding table cells to the selected images if ( $("#paddingbrn").val()!="" ){ $("#brown3").css("background-image","url('images/" + $("#paddingbrn").val() + ")"); } //If no image is found, then empty all the table cells else{ $("#brown3").css("background-image","url('images/brnbrn.png')"); }$("#paddingbrn").on("change", function() { $("#pipingcolour").val($(this).find("option:selected").attr("name")); }); }); – Denise Field Feb 13 '15 at 12:36
sorry couldnt seem to put it on neatly. Will this code work? – Denise Field Feb 13 '15 at 12:36
@DeniseField probably be good to put it in a jsfiddle to test it, other users can then contribute. – lharby Feb 13 '15 at 12:43

Set background CSS of a Div depending on select

1 Answers1