Geek Answers Handbook

Background image position fixed for parent

I have a div somewhere on the page, and I need to give it a background image that does not move when you scroll your browser window. This is my code:

#mydiv { float:left; width:540px; margin:40px 0px 0px 20px; background:url(/images/myimage.jpg) no-repeat fixed 0px 0px transparent; }

The problem is that my background image is positioned relative to the canvas, and I need it to be positioned relative to #mydiv and not yet scrolling.

To illustrate the problem, see here http://jsfiddle.net/QPrUz/1/
In the example, #div1 looks great, but #div2 does not show the background at all, since it is placed relative to the canvas instead of #div2 .

Any suggestions are welcome.

PS
iframe is not an option.

+4
source share
4 answers

According to Jawad's comment, this is not possible with CSS. I ended up changing the background to something repeatable.

+5
source

MDN for fixed says:

This keyword means that the background is fixed relative to the viewport.

Use scroll instead of fixed :

This keyword means that the background is fixed relative to the element itself and does not scroll its contents. (It is effectively bound to the border of the element.)

Thus, the full code for the sticky background is fixed relative to the element itself:

 .sticky-background { background: url(...) no-repeat scroll; }
0
source

If I understand the question, you just need to place the top / left of the background image so that div2 looks like div1.

here it is: http://jsfiddle.net/7kku4v1t/

I just changed:

 background:url(http://i35.tinypic.com/4tlkci.jpg) fixed no-repeat;

to

 background:url(http://i35.tinypic.com/4tlkci.jpg) 210px 0 fixed no-repeat; ^^^^^^^ XY
0
source

For this you need to use javascript.

-1
source

More articles:


All Articles