mrkidd85 Posted March 30, 2006 Share Posted March 30, 2006 I have added and stretched a background image and it works fine, i did it using this script<html><head> <title>How to stretch a background image.</title><style type="text/css">body {margin:0px;}#bg_image {width: 100%;height: 100%;left: 0px;top: 0px;position: absolute;z-index: 0;}#contents {z-index: 1;position: absolute;}</style></head><body><!-- this creates the background image --><div id="bg_image"> <img src="Beach.jpg" style="width: 100%; height: 100%;"> </div>But is there anyting I can add to this so that the background image remains fixed when I scroll down and up? Link to comment Share on other sites More sharing options...
scott100 Posted March 30, 2006 Share Posted March 30, 2006 Yes, look at this page: http://www.w3schools.com/css/tryit.asp?fil...ound-attachmentremove the div and add:<head><style type="text/css">body {background-image: url('Beach.jpg');background-repeat: no-repeat;background-attachment: fixed}</style></head> Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 30, 2006 Author Share Posted March 30, 2006 i tried to do this but it doesnt work and where abouts do I add this to my script that I already have? Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 30, 2006 Author Share Posted March 30, 2006 sorry I didn't make myself clear enough. When I type what you said the background does go fixed but it is no longer stretched and the background image comes to an end before the page, is there anything i can put in between the script that I said to make it fixed?=<html><head> <title>How to stretch a background image.</title><style type="text/css">body {margin:0px;}#bg_image {width: 100%;height: 100%;left: 0px;top: 0px;position: absolute;z-index: 0;}#contents {z-index: 1;position: absolute;}</style></head><body><!-- this creates the background image --><div id="bg_image"> <img src="Beach.jpg" style="width: 100%; height: 100%;"> </div><!-- this puts the contents of the page ontop of the background image --><div id="layer1"> this is the script I have pasted, is there anything I can put in the middle of this to make it fixed. If there is could someone show me the whole script that I should paste into the page, as I have no clue how to do it Link to comment Share on other sites More sharing options...
scott100 Posted March 30, 2006 Share Posted March 30, 2006 you could try position:fixed although i'm not sure if all browsers support it yet... Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now