How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS

Question

I\'m looking to make a page that has a background gradient that changes color every few seconds and blends between transitions. Now I want to apply this effect on the to the upp

Answer 1

You can try combinig background-size and background-position with javascript:

setGradientSizes = function (el) {
var width = $(document).width() + 'px', height = $(document).height() + 'px';
$(el || '.gradient:not(body)').each(function () {
    var offset = $(this).offset();
    $(this).css('background-size', width + ' ' + height);
    $(this).css('background-position', (offset.left * -1) + 'px ' + (offset.top * -1) + 'px');
})};

Working example here -> jsbin

NOTES:

• this is not 100% cross browser - background-size is supported in FF4.0+, IE9.0+, Opera 10.0+, Chrome 1.0+, Safari 3+.
• For some older browsers you can try browser specific prefixes (like -moz-background-size) - my example does not cover that.
• To reduce load flickering you can apply calculations at first and then add background gradient