Hello,
I’m trying to figure out how to make a background image move with the foreground of my webpage like at this webpage I found on the net:
On the page I’m working on it just stays stationery while the foreground moves and I’m trying to make it like the above site. Here is my site URL:
I looked at the view source code but still couldn’t figure it out. If anyone could tell me how to do it I"d appreciate it a lot.
Thanks
WEich1213
I’m not sure what you’re asking. Both of the sites you link to have a background that behaves essentially the same way when you scroll, no?
I have not looked at the pages you mention, but i am assuming the tbe css bacground attacbment property is set to “scroll”
I want the background image on the site I’m working on to move with the main foreground box like on the Pala casino ad. Right now it just doesn’t move at all. How do you set the css background attachment property to “scroll”?
Thanks,
WEich1213
As others have said, it does! What browser are you using? I’m looking at Firefox.
How do you set the css background attachment property to “scroll”?
It does that by default, which is what you have (defaults in red):
background: [COLOR="Red"]transparent[/COLOR] url(images/the_site_Bgd_image2.gif) [COLOR="Red"]repeat scroll 0 0[/COLOR];
Sorry, I wasn’t very clear, what I mean is when you resize the window by making in larger or smaller with the right corner of the browser, the background for the Pala Casino site moves with the foreground main area, but on my site when you resize the browser window, the background doesnt’ move but the foreground does. I want the background to move also like it’s attached to the foreground, like on the Pala Casino site. thanks,
WEich1213
Ohhhhhhh. We all thought you were talking about scrolling, not resizing.
If you inspect the Pala Casino website with Firebug, you’ll see that there aren’t actually two different backgrounds: it’s all just one image, which is why it doesn’t shift when you resize.
How do they keep the bottom from having a scroll bar? I tried to make the whole thing one background image but a scroll bar shows up at the bottom of the browser.
Thanks for your help,
WEich1213
A background image won’t cause scroll bars. Something else must have done that. I don’t see a scroll bar in Firefox.
If you have one large background image, it is often a nice idea to center it on the screen and not let it repeat:
body {
background-image: url(images/the_site_Bgd_image2.gif) no-repeat 50% 0;
}
The 50% center the image horizontally.
as far as i know, background imagesdo not resize automatically.So what you are seeing is either not a background image or it’s size is being changed on the fly via javascript (not supported by all browsers). the bottom scrollbar problem is being caused by an element that is wider than the available width of the window