Fixed Background

doomforge

Dec 24 2006, 07:16 PM

A while ago i was wondering how to make a fixed (static)* background and so i thought that other people might also want to know how to do it...the good news, it's a lot easier than you think

the code goes like this:

HTML

* a fixed or static background is a background that does not move while all the website content above it moves (ie text pictures etc.) an example would be some thing like this

example web site

so have fun giving your website some really cool effects

jlhaslip

Dec 25 2006, 04:28 AM

Here is a sample of CSS code that I use on a site to "freeze" a background gif at a specific location on the page. The gif is about 20 percent opaque, so it is really faint on the screen and it doesn't move when the page scrolls.

CODE

body {
     background-color: #dfffdf;                                      // set the colour for the page
     background-image: url('images/opac_logo.gif');        // select the image
     background-repeat: no-repeat;                                // no repetition of the image
     background-attachment: fixed;                                // fix the image on the page
     background-position: 50% 75%;                              // at this spot, play with it...
     }

When I view your page, the image was repeated and didn't "freeze" itself on the page. If you want that to happen, feel free to borrow from the code I have posted.

ETCZ

Jan 16 2007, 05:51 AM

Well that is certainly a good bit of code you have provided and I wish to thank you for sharing it with the Forum membership. I had planned on learning this technique and now that I have found it here, I will be able to use it on the next version of my webite which I hope to get Hosted here at the trap17 Free Web Hosting service. As long as I am careful about posting non-spam postings and writing good quality posts, I should be abe to earn enough Hosting credits shortly, then I will have a nice fixed image on the background of my page.

matak

Jan 16 2007, 02:16 PM

i kinda guess that this works for all backgrounds not only body?! and with that you can set background-position: 50% 75%; in pixels too.. haven't tried it, it's a wild guess..

hts

Jan 16 2007, 10:52 PM

of course matak, in css you can specify sizes in: px, %, em (these are widely used)
also, you can define for any element a background

learn css, it is a very powerful "tool" to build your site

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

Fixed Background - easy

Fixed Background - easy