Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
website promotion banner
eturnkeys
Your Ad Here
No Print Script
by Ades Tynyshov
Customizing the Status Bar Message
by iCe
Scrollable Div's
by Joseph Skidmore
CSS Hacks: Removing the horizontal scroll bar
by Pulse GFX
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Fixed Background
rss

Fixed Background

Author: Depiction.net More by this author

Added: Oct 21, 2004 Rating:  Average Rating: 2.78 Votes: 121 Position: 10458 of 13486Average Rating: 2.78 Votes: 121 Position: 10458 of 13486Average Rating: 2.78 Votes: 121 Position: 10458 of 13486Average Rating: 2.78 Votes: 121 Position: 10458 of 13486Average Rating: 2.78 Votes: 121 Position: 10458 of 13486 Level: Beginner Software:  DreamweaverGoLiveFrontPage

This short tutorial will show you how use a fixed background image. With a fixed background, the background image doesn't move as the page is scrolled.

Fixed Background Example
Fixed Background Example.

Place the following code in the head section of you page.(between <head> and </head>)

Code:

<style type="text/css">
body
{
background-image:
url("/images/image.gif");
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>

background-image- Sets the image to be used for the background
backgroud-repeat- Sets the behavior of the background. To repeat the background as needed, change no-repeat to repeat.
background-attachment- Sets whether a background image is fixed or scrolls with the rest of the page.

The background image can also be positioned on the page by using the background-position property.

Code:

background-position: center

Other values besides center can be used with background-position.

top right, center left, bottom center, etc.
x% y%- Sets the relative postion of the image. The first value is the horizontal position and the second value is the vertical.
x-pos y-pos- Set the position using pixels. (ex. 200px 300px) The first value is the horizontal position and the second value is the vertical.


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Fixed Background"