Jump to content
xisto Community
Sign in to follow this  
doomforge

Fixed Background easy

Recommended Posts

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 :lol:
the code goes like this:

<body background="URL OF BACKGROUND IMAGE" bgproperties="fixed">



* 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

Share this post


Link to post
Share on other sites

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.

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.

Share this post


Link to post
Share on other sites

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 Xisto 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.

Edited by jlhaslip (see edit history)

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

of course matak, in css you can specify sizes in: px, %, em (these are widely used)also, you can define for any element a backgroundlearn css, it is a very powerful "tool" to build your site :P

Share this post


Link to post
Share on other sites
Page Background Behavior ProblemFixed Background

First of all, I am using Dreamweaver CS4. I have created a page in which the background image remains fixed as I scroll down the page (Background-Repeat: Repeat; Background-Attachment: Fixed). When I preview in Browser it works fine, but when I leave the page and then return, or initially enter from another page, it does not work. I have tried finding a solution on Dreamweaver tutorial and help pages but have not been able find anything that will help. Please help.Chris Keiser

-question by Chris Keiser

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.