Does anyone know how to create a Scrolling web page?

Developers Frontend
1

I dont think this is to difficult but I think it looks really good. Would like to have a Stationary scrolling web page.



Anyone know what code I need to use and where to put it?



I Just kind of did a little research and found two different codes:


```php

Stationary background images remain in one place even when scrolling through the page. Only the text will move. To create this effect, place the code below within your tag.



[color=#008000][/color]



Edit the text indicated in bold to suit your needs.

When selecting your background image, keep in mind that your text will be moving over your image, so try to select an image that won't make your text difficult to read. To prevent your background image from tiling (repeating), place the following code between your and tags.



[color=#008000]


[/color]

```





This website is an example:



www.movmx.com Where the background stays and does not move

2

So you want the background image to stay stationary, in this instance, the earth/motorbikes image, so only the main content moves as you scroll the page?



Edit the relevent CSS file, look for the 'body' style, and apply your change to the body style like so:


background: url("http://www.yourdomain.com/path/to/image/backgroundimage.jpg") no-repeat fixed center top #FFFFFF



The 'no-repeat' and 'fixed' is required to keep the background image stationary.



FYI, I just checked your site, to see if I could supply the code relevent to your theme, but your site crawled. That background image you are using is over 1.5mb in size, see this report of your site. 2.2mb page size - ouch! It's not just your prospective customers that will get bored waiting for the pages to load and will go find one of your competitors sites, but Google won't favour your site speed either.



For your site:



/skins/basic/customer/styles.css



Find:



.main {
background:url("images/1680x1050R.jpg") repeat scroll center top #FFFFFF
}


Replace with:


.main {
background: url("images/1680x1050R.jpg") no-repeat fixed center top #FFFFFF
}

3

[quote name='StellarBytes' timestamp='1359158220' post='153692']

So you want the background image to stay stationary, in this instance, the earth/motorbikes image, so only the main content moves as you scroll the page?



Edit the relevent CSS file, look for the 'body' style, and apply your change to the body style like so:


background: url("http://www.yourdomain.com/path/to/image/backgroundimage.jpg") no-repeat fixed center top #FFFFFF



The 'no-repeat' and 'fixed' is required to keep the background image stationary.



FYI, I just checked your site, to see if I could supply the code relevent to your theme, but your site crawled. That background image you are using is over 1.5mb in size, see this report of your site. 2.2mb page size - ouch! It's not just your prospective customers that will get bored waiting for the pages to load and will go find one of your competitors sites, but Google won't favour your site speed either.



For your site:



/skins/basic/customer/styles.css



Find:



.main {
background:url("images/1680x1050R.jpg") repeat scroll center top #FFFFFF
}


Replace with:


.main {
background: url("images/1680x1050R.jpg") no-repeat fixed center top #FFFFFF
}


[/quote]





What do you think I should do as far as the page speed goes then with the background image being so big?



And im trying that code now you gave me.

4

[quote name='harpersmoto' timestamp='1359217945' post='153715']

What do you think I should do as far as the page speed goes then with the background image being so big?



And im trying that code now you gave me.

[/quote]





That code worked Exactly as I need it to! Thank you!



And also because the background image isn't repeated it knocked fown the page size from 2.2MB to 1.7MB



Any way of making this faster?

5

[quote name='harpersmoto' timestamp='1359218662' post='153716']

That code worked Exactly as I need it to! Thank you!



And also because the background image isn't repeated it knocked fown the page size from 2.2MB to 1.7MB



Any way of making this faster?

[/quote]

Have you tried to editing the background image using Photoshops 'Optimise for the web', or similar?



There are a few simple modifications you could benefit from. See my signature link, I'll be posting more soon.

6

Actually I forgot about that photoshop Optimize for the web thing. Went and did that. Took the image which was around 1.5MB to 524KB. So I nearly cut the size into a third!



Thanks for all the help!

7

[quote name='harpersmoto' timestamp='1359401572' post='153849']

Actually I forgot about that photoshop Optimize for the web thing. Went and did that. Took the image which was around 1.5MB to 524KB. So I nearly cut the size into a third!



Thanks for all the help!

[/quote]

Good job, I sent you a PM about it just as you posted this. Glad you sorted that problem out. Now to take advantage of browser caching!