When i scroll down a DIV that has a background-image, the image doesnt scroll as the div does

Question

im trying to simulate a grid system, so i have a function `set_gridSize" which will set the background-image of the div to a grid. the output of the function sets the backgroubd image to a base64 encoded string that renders.

$.css({"background-image", "url(data:image/svg+xml;base64,"+encode(xml) +")"});

so i create this, and it looks create. the issue though is that when it scrolls, it doesnt scroll the image as well. I was thinking that it would.

is there something that i am doing wrong? Is there a concept for this that i am missing to address?

Answer 1

使用background-image属性，您无法执行此操作，但是如果将另一个div放置在原始div ，然后设置该div的background-image ，则可以使用： Fiddle示例

Answer 2

Try using the background-attachment property along with background-repeat :

$.css({
    "background-image": "url(data:image/svg+xml;base64,"+encode(xml) +")",
    "background-attachment": "fixed",
    "background-repeat": "no-repeat"});

This will keep the image where it originally started as you scroll the page.

Example fiddle.