Question

I’m trying to change the background image on body, I have transparent and solid patterns images and have this code:

$('#patterns, #solid').click(function() {           
    var pattern = $(this).val();                    
    if ($('input:checkbox').is(':checked')) {
        $('body').css('background-image', 'url("images/patterns/solid/'+ pattern +'.png")'); 
    } 
    else {
        $('body').css('background-image', 'url("images/patterns/'+ pattern +'.png")');
    }           
});

I have in the html one select with option values for the transparent patterns, and also a checkbox that says Check this checkbox if you want to use the solid patterns. Thanks a lot.

<label for="pattern">Choose Pattern</label>
        <select id="patterns" name="pattern">
            <option value="absurdidad">absurdidad</option>
            <option value="arches">arches</option>
            <option value="argyle">argyle</option>
            <option value="batthern">batthern</option>
        </select>

        <label for="solid">Use only solid patterns</label>
        <input type="checkbox" id="solid" />

If I put the css(‘background-color’, ‘red’); } else { css(‘background-color’, ‘black’) }; Works like a charm, on click immediately fires and changes the background color, keeps the transparent pattern and adds the background-color, but not the background-image

Answer 1

The method call $(this).val() is returning the value of the checkbox. From your html snippet, the pattern should be the value of the option selected in the combobox.

---

If I’m understanding correctly, this should accomplish what you are looking for:

// Update the background image on the body tag when:
//   a) A new pattern is selected, or
//   b) The solid checkbox is checked or unchecked
$('#patterns, #solid').change(function() {  
    var pattern,
        isSolid;

    // Get the pattern from the value selected in #patterns.    
    pattern = $('#patterns option:selected').val();

    // Use a solid background if #solid is checked.
    isSolid = $('#solid').is(':checked');

    if (isSolid) {
        $('body').css('background-image', 'url("images/patterns/solid/'+ pattern +'.png")');  
    } else {
        $('body').css('background-image', 'url("images/patterns/'+ pattern +'.png")');
    }
});