How to create background that won't move, but webpage can scroll?

B

Bebob

New Member
I've seen websites that have images on the right and left side of a webpage that scrolls, but the images in the background stays in place. In other words, the webpage in the middle can be scrolled. The images in the background don't move while you scroll up and down page.

Is there a website I can go and learn some new webdesign techniques.

Thanks
 
V

vectoraster

New Member
It's called a fixed background. I use the following script. Within the <head></head> tags, place the following...

<style>
<!--
body {
background-image: url(backgroundfile.JPG);
background-repeat: no-repeat;
background-attachment: fixed;
}
//-->
</style>

Replace backgroundfile.JPG with the file you wish to use as your background. This will fix the image on your page so it doesn't scroll.

As far as allowing the middle portion of your page to scroll, just set a table background image. Example...

<td background="backgroundfile.JPG">

Hope this helped :)
 
PixelPusher

PixelPusher

Super Moderator
Staff member
I highly recommend using external stylesheets with the <link> tag instead of adding style tags to the head of your doc.

Also dont use tables. The scrolling action is the default behavior of a page. If you create a background image with a left and right design, then fix the position, those images will stay in place and the remainder of the page will still scroll as normal (hence the middle scrolls)
 
C

computerGeek

Banned
this is the line that you should be focused on then:

background-attachment: fixed;

this will make your background stay in place. You can do this using an external stylesheet. yeah, i do recommend you use an external stylesheet too. so that it will be easy for you to change the layout of your website according to your taste.
 
You must log in or register to reply here.
Top