jQuery CSS chaining background image and z-index

Question

I have a div where an image is generated.result. I need to set a background image within that div that will act as a layer on top of the generated image. I have the following, but can't get the image to show:

image.appendTo($(".result"))
  $button = $('<button class="btn btn-default remove">')
        .text('Remove')
        .on('click', function () {
            image.remove();
            $(this).remove();
            return false;
        });
    $button.appendTo($(".result").css("background-image", "url('iphone_5.jpg') no-repeat").css("z-index", "1000"));
});

The image on the right in the screenshot is the rendered crop. You can see the image in the background(along the top and left border) that should sit on top of the rendered image.

Answer 1

http://www.w3schools.com/css/css_background.asp

body {
    background-image: url("gradient_bg.png");
    background-repeat: no-repeat;
}

or

body {
    background: url("gradient_bg.png") no-repeat;
}

like

image.appendTo($(".result"))
  $button = $('<button class="btn btn-default remove">')
        .text('Remove')
        .on('click', function () {
            image.remove();
            $(this).remove();
            return false;
        });
    $button.appendTo($(".result").css("background", "url('iphone_5.jpg') no-repeat").css("z-index", "1000"));
});

or

image.appendTo($(".result"))
  $button = $('<button class="btn btn-default remove">')
        .text('Remove')
        .on('click', function () {
            image.remove();
            $(this).remove();
            return false;
        });
    $button.appendTo($(".result").css("background-image", "url('iphone_5.jpg')").css("Background-repeat", "no-repeat").css("z-index", "1000"));
});

ahh to slow :c

Answer 2

You are trying to use the shorthand background syntax with the background-image property. You need to change that to background.

image.appendTo($(".result"))
  $button = $('<button class="btn btn-default remove">')
        .text('Remove')
        .on('click', function () {
            image.remove();
            $(this).remove();
            return false;
        });
    $button.appendTo($(".result").css("background", "url('iphone_5.jpg') no-repeat").css("z-index", "1000"));
});