Fixing a graphic as well as background?

HTML & CSS
1

Hey all,

I am designing a website layout, and I am very happy with the template I have created. I am using a (fixed) tiled background so the background stays fixed as you scoll down.

I also fixed a Lollipop image to a div and absolutely positioned it to sit on the right hand side of the page between the main container and the body.

I am really happy with the results, but I would really like the lollipop image to be fixed into place so when you scroll down it stays in view.

I appreciate the limitations, but is this at all possible? I wondered if you clever folk at sitepoint forums might be able to come up with a nifty solution?

Many thanks!

Site Url:- m y c a n d y g i r l . c o . u k /

2

Have you tried fixed positioning:)


#lollipop {
  background: url("http://www.mycandygirl.co.uk/img/lollipop.png") no-repeat  0 0 ;
  height: 296px;
[B]  margin-left: 919px;
  position: fixed;
  top: 330px;[/B]
  width: 120px;
[B]  z-index: 99;[/B]
}

You’d have to give IE6 your original code though as it doesn’t understand fixed positioning.

3

Hi Paul,

thankyou so much for your kind help. No I had not tried it, that worked a treat thankyou!

So what is the difference between:-

background-attachment:fixed;

and

position:fixed; ?

Many thanks!

4

background-attachment:fixed refers to a background image and has nothing to do with where the element itself is placed. A fixed background image is always placed in relation to the viewport no matter what element it is applied to.

So if you applied a fixed background image to your lollipop div the chances are that you would never see it unless the lollipop div happened to coincide with the background -position of the image.

Position:fixed on the other hand refers to the element itself and once again any positioning is related to the viewport and not its current context. If the document scrolls the fixed position element does not.

To position fixed elements in a centred page is tricky because you can’t use left or right co-ordinates as they refer to the viewport. Instead you must let the element occupy its position in the normal flow and then make it fixed at that point. Horizontal adjustments can then be done with margins instead of left and right.

5

That is an extremely useful, informative and helpful reply - I really learnt something today! :cool:

Many thanks again!