berteldk Posted July 19, 2010 Share Posted July 19, 2010 Hey.I need to make a background positioning fixed, so its allways the same picture there and then i need my DIVs to be able to move on the background. so instead of you normaly scroll down and the background scroll with, i want the DIVs to scroll instead.I have tried to make the background in my body positioning fixed but then i cant get my divs to scroll :)Anyone know anything about this, i could use a hand.thx Link to comment Share on other sites More sharing options...
thescientist Posted July 19, 2010 Share Posted July 19, 2010 link or code? Link to comment Share on other sites More sharing options...
berteldk Posted July 19, 2010 Author Share Posted July 19, 2010 yea i found this site who does the same, but cant find anything with firebug as a solution http://team.hiidef.com/ Link to comment Share on other sites More sharing options...
ShadowMage Posted July 19, 2010 Share Posted July 19, 2010 Try this:http://w3schools.com/css/tryit.asp?filenam...ound-attachment Link to comment Share on other sites More sharing options...
HungryMind Posted July 20, 2010 Share Posted July 20, 2010 Hi!Try This Code: <body background="image.jpg" bgproperties="fixed"> Don't Use Backgroud Color In Body Or In Any Background Div. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 20, 2010 Share Posted July 20, 2010 setting the background image and fixed the way you have used ' background="image.jpg" bgproperties="fixed"' is old school, and not W3C compliant.the correct method would be to usebody{background-attachment:fixed; background-image:url(../myBGimage.png);/*with maybe*/background-position:50% 190px;} Link to comment Share on other sites More sharing options...
berteldk Posted July 28, 2010 Author Share Posted July 28, 2010 Sorry i have been away, i wil try this out tomorrow. Thx for all the replys, i will repport back if i can make it work or if i need further assistence!thank you very much Link to comment Share on other sites More sharing options...
berteldk Posted July 29, 2010 Author Share Posted July 29, 2010 Guys i love you, it worked!Cheers - dunno what i done wrong the first time, but now it works and thats awesome!ty very much.Last question then.Is there any way to make the background picture resize if people is making the explorer window bigger or smaller when it is fixed? Link to comment Share on other sites More sharing options...
ShadowMage Posted July 30, 2010 Share Posted July 30, 2010 Is there any way to make the background picture resize if people is making the explorer window bigger or smaller when it is fixed?Not with CSS. You'd have to have your image in an <img> tag (or possibly set as the background of a <div>) and use JavaScript to resize it when the window is resized. Link to comment Share on other sites More sharing options...
berteldk Posted July 30, 2010 Author Share Posted July 30, 2010 Ahh ok i understand, i guess i will just have to settle with this for now untill project java/flash learning begins!Ty Link to comment Share on other sites More sharing options...
dsonesuk Posted July 31, 2010 Share Posted July 31, 2010 you could use something similar to this: the background image is 1800 x 1600, but will shrink to match screen size, note it won't work in ie6 because of position:fixed; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">*{margin:0;padding:0; position:relative; z-index:10;}body, html{ height:100%; position:relative; z-index:0;}#bgimage { width:100%; height:100%; position:fixed; top:0; left:0; z-index:0;}</style></head><body><img src="clonewars_body.jpg" id="bgimage" /><div> <p>Sed do eiusmod tempor incididunt velit esse cillum dolore excepteur sint occaecat. In reprehenderit in voluptate quis nostrud exercitation ut enim ad minim veniam. Duis aute irure dolor consectetur adipisicing elit, ut aliquip ex ea commodo consequat. Mollit anim id est laborum.</p> <p>Sed do eiusmod tempor incididunt quis nostrud exercitation excepteur sint occaecat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, duis aute irure dolor. Sunt in culpa. Quis nostrud exercitation ut aliquip ex ea commodo consequat.</p> <p>Ut labore et dolore magna aliqua. Duis aute irure dolor lorem ipsum dolor sit amet, cupidatat non proident. In reprehenderit in voluptate quis nostrud exercitation ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sunt in culpa cupidatat non proident.</p> <p>Lorem ipsum dolor sit amet, quis nostrud exercitation sed do eiusmod tempor incididunt. In reprehenderit in voluptate velit esse cillum dolore. Sed do eiusmod tempor incididunt consectetur adipisicing elit, ut enim ad minim veniam. Quis nostrud exercitation eu fugiat nulla pariatur. Duis aute irure dolor ullamco laboris nisi cupidatat non proident.</p> <p>Excepteur sint occaecat quis nostrud exercitation qui officia deserunt. Duis aute irure dolor ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, in reprehenderit in voluptate cupidatat non proident. Ut labore et dolore magna aliqua.</p> <p>Ut aliquip ex ea commodo consequat. Ullamco laboris nisi excepteur sint occaecat sed do eiusmod tempor incididunt. Quis nostrud exercitation cupidatat non proident, lorem ipsum dolor sit amet.</p> <p>Velit esse cillum dolore qui officia deserunt consectetur adipisicing elit. Ullamco laboris nisi sed do eiusmod tempor incididunt lorem ipsum dolor sit amet. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.</p> <p>Mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate consectetur adipisicing elit. Ullamco laboris nisi ut enim ad minim veniam, sed do eiusmod tempor incididunt. Duis aute irure dolor eu fugiat nulla pariatur.</p> <p>Excepteur sint occaecat quis nostrud exercitation mollit anim id est laborum. Ut labore et dolore magna aliqua. Qui officia deserunt consectetur adipisicing elit, ut aliquip ex ea commodo consequat. Quis nostrud exercitation sed do eiusmod tempor incididunt. Duis aute irure dolor excepteur sint occaecat ut labore et dolore magna aliqua.</p> <p>Sed do eiusmod tempor incididunt velit esse cillum dolore excepteur sint occaecat. In reprehenderit in voluptate quis nostrud exercitation ut enim ad minim veniam. Duis aute irure dolor consectetur adipisicing elit, ut aliquip ex ea commodo consequat. Mollit anim id est laborum.</p> <p>Sed do eiusmod tempor incididunt quis nostrud exercitation excepteur sint occaecat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, duis aute irure dolor. Sunt in culpa. Quis nostrud exercitation ut aliquip ex ea commodo consequat.</p> <p>Ut labore et dolore magna aliqua. Duis aute irure dolor lorem ipsum dolor sit amet, cupidatat non proident. In reprehenderit in voluptate quis nostrud exercitation ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sunt in culpa cupidatat non proident.</p> <p>Lorem ipsum dolor sit amet, quis nostrud exercitation sed do eiusmod tempor incididunt. In reprehenderit in voluptate velit esse cillum dolore. Sed do eiusmod tempor incididunt consectetur adipisicing elit, ut enim ad minim veniam. Quis nostrud exercitation eu fugiat nulla pariatur. Duis aute irure dolor ullamco laboris nisi cupidatat non proident.</p> <p>Excepteur sint occaecat quis nostrud exercitation qui officia deserunt. Duis aute irure dolor ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, in reprehenderit in voluptate cupidatat non proident. Ut labore et dolore magna aliqua.</p> <p>Ut aliquip ex ea commodo consequat. Ullamco laboris nisi excepteur sint occaecat sed do eiusmod tempor incididunt. Quis nostrud exercitation cupidatat non proident, lorem ipsum dolor sit amet.</p> <p>Velit esse cillum dolore qui officia deserunt consectetur adipisicing elit. Ullamco laboris nisi sed do eiusmod tempor incididunt lorem ipsum dolor sit amet. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.</p> <p>Mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate consectetur adipisicing elit. Ullamco laboris nisi ut enim ad minim veniam, sed do eiusmod tempor incididunt. Duis aute irure dolor eu fugiat nulla pariatur.</p> <p>Excepteur sint occaecat quis nostrud exercitation mollit anim id est laborum. Ut labore et dolore magna aliqua. Qui officia deserunt consectetur adipisicing elit, ut aliquip ex ea commodo consequat. Quis nostrud exercitation sed do eiusmod tempor incididunt. Duis aute irure dolor excepteur sint occaecat ut labore et dolore magna aliqua.</p> <p>Sed do eiusmod tempor incididunt velit esse cillum dolore excepteur sint occaecat. In reprehenderit in voluptate quis nostrud exercitation ut enim ad minim veniam. Duis aute irure dolor consectetur adipisicing elit, ut aliquip ex ea commodo consequat. Mollit anim id est laborum.</p> <p>Sed do eiusmod tempor incididunt quis nostrud exercitation excepteur sint occaecat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, duis aute irure dolor. Sunt in culpa. Quis nostrud exercitation ut aliquip ex ea commodo consequat.</p> <p>Ut labore et dolore magna aliqua. Duis aute irure dolor lorem ipsum dolor sit amet, cupidatat non proident. In reprehenderit in voluptate quis nostrud exercitation ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sunt in culpa cupidatat non proident.</p> <p>Lorem ipsum dolor sit amet, quis nostrud exercitation sed do eiusmod tempor incididunt. In reprehenderit in voluptate velit esse cillum dolore. Sed do eiusmod tempor incididunt consectetur adipisicing elit, ut enim ad minim veniam. Quis nostrud exercitation eu fugiat nulla pariatur. Duis aute irure dolor ullamco laboris nisi cupidatat non proident.</p> <p>Excepteur sint occaecat quis nostrud exercitation qui officia deserunt. Duis aute irure dolor ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, in reprehenderit in voluptate cupidatat non proident. Ut labore et dolore magna aliqua.</p> <p>Ut aliquip ex ea commodo consequat. Ullamco laboris nisi excepteur sint occaecat sed do eiusmod tempor incididunt. Quis nostrud exercitation cupidatat non proident, lorem ipsum dolor sit amet.</p> <p>Velit esse cillum dolore qui officia deserunt consectetur adipisicing elit. Ullamco laboris nisi sed do eiusmod tempor incididunt lorem ipsum dolor sit amet. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur.</p> <p>Mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate consectetur adipisicing elit. Ullamco laboris nisi ut enim ad minim veniam, sed do eiusmod tempor incididunt. Duis aute irure dolor eu fugiat nulla pariatur.</p> <p>Excepteur sint occaecat quis nostrud exercitation mollit anim id est laborum. Ut labore et dolore magna aliqua. Qui officia deserunt consectetur adipisicing elit, ut aliquip ex ea commodo consequat. Quis nostrud exercitation sed do eiusmod tempor incididunt. Duis aute irure dolor excepteur sint occaecat ut labore et dolore magna aliqua.</p></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.