Jump to content

Positioning


Recommended Posts

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 post
Share on other sites

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;}

Edited by dsonesuk
Link to post
Share on other sites
  • 2 weeks later...

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?

Edited by berteldk
Link to post
Share on other sites
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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...