jQuery CSS chaining background image and z-index

Question

enter image description here

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.

Can you please try to rephrase the actual question, it is very unclear what you are trying to achieve. Also there are a few mistakes in your code! But first go for a clearer question! — supersize
– supersize, Commented Oct 24, 2014 at 15:26

Steve Sanders · Accepted Answer · 2014-10-24 15:27:43Z

0

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"));
});

answered Oct 24, 2014 at 15:27

Steve Sanders

8,6812 gold badges33 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matt Over a year ago

This is what I'm looking for. However, I can't get the iphone image to sit on top of the generated image.

Steve Sanders Over a year ago

That's because it is a background image. Backgrounds go behind the content, not on top of it.

Matt Over a year ago

And, I'm having an early morning Friday moment here :)

fortiZ · Accepted Answer · 2014-10-24 15:42:24Z

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

Collectives™ on Stack Overflow

jQuery CSS chaining background image and z-index

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related