turtle Posted May 12, 2006 Share Posted May 12, 2006 Hi, in a n00b, but i cant figure out how to make a picture/backround stretch, so that it's on no repeat, but when you extend the window it will just stretch your picutre, so its like a no repeat, but you will always see the picture, ive tryed the following but it doesn't work, any ideas?body {background-image:url(background.gif);background-attachment:fixed;background-repeat:no-repeat;background-repeat:scroll;}also, does anyone know how to make text be floating the bottom right of the page? Link to comment Share on other sites More sharing options...
scott100 Posted May 12, 2006 Share Posted May 12, 2006 This is a good example: http://www.cssplay.co.uk/layouts/background.html Link to comment Share on other sites More sharing options...
turtle Posted May 12, 2006 Author Share Posted May 12, 2006 This is a good example: http://www.cssplay.co.uk/layouts/background.html<{POST_SNAPBACK}> yes it is, want to tell me how to do it? :-d Link to comment Share on other sites More sharing options...
scott100 Posted May 12, 2006 Share Posted May 12, 2006 All you have to do is look at the source code :)Maybe this is easier to follow, just put all your content between <div id="content"></div> and you'll be fine <head><style>html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}#background{position:absolute; z-index:1; width:100%; height:100%;}#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} #content {padding:5px 300px 20px 200px;}</style></head><body><img id="background" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" alt="" title="" /> <div id="scroller"><div id="content"><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1><h1>ALICE'S ADVENTURES IN WONDERLAND</h1></div></div></body> Link to comment Share on other sites More sharing options...
turtle Posted May 13, 2006 Author Share Posted May 13, 2006 cool! thanks, also do you know how to may text stay at the bottom of the page, through a scroll Link to comment Share on other sites More sharing options...
turtle Posted May 13, 2006 Author Share Posted May 13, 2006 cool! thanks, also do you know how to may text stay at the bottom of the page, through a scroll<{POST_SNAPBACK}> also doesnt that leave the picture in the top layer, it is for me, how to i make it a lower layer?to put text over. Link to comment Share on other sites More sharing options...
scott100 Posted May 13, 2006 Share Posted May 13, 2006 also doesnt that leave the picture in the top layer, it is for me, how to i make it a lower layer?<{POST_SNAPBACK}> It worked ok when i tested it with IE, FF and Opera, what browser you using?The image has the lower z-index than the content, have a look. Link to comment Share on other sites More sharing options...
scott100 Posted May 13, 2006 Share Posted May 13, 2006 cool! thanks, also do you know how to may text stay at the bottom of the page, through a scroll<{POST_SNAPBACK}> yip <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><head><title> CSS position:fixed; for IE6</title><style type="text/css">body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto;}body {font-family: georgia, serif; font-size:16px;}#menu {display:block; top:85%; left:80%; width:130px; position:fixed; border:5px solid red;}* html #menu {position:absolute;}</style><!--[if lte IE 6]><style type="text/css">/*<![CDATA[*/html {overflow-x:auto; overflow-y:hidden;}/*]]>*/</style><![endif]--></head><body style="overflow:none"><div id="menu">Hello<br />i think i will <br /> just stay here </div><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1></body></html> Link to comment Share on other sites More sharing options...
turtle Posted May 13, 2006 Author Share Posted May 13, 2006 yip <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><head><title> CSS position:fixed; for IE6</title><style type="text/css">body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto;}body {font-family: georgia, serif; font-size:16px;}#menu {display:block; top:85%; left:80%; width:130px; position:fixed; border:5px solid red;}* html #menu {position:absolute;}</style><!--[if lte IE 6]><style type="text/css">/*<![CDATA[*/html {overflow-x:auto; overflow-y:hidden;}/*]]>*/</style><![endif]--></head><body style="overflow:none"><div id="menu">Hello<br />i think i will <br /> just stay here </div><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1><h1>Scroll the page</h1></body></html> <{POST_SNAPBACK}> confused, whats with all the code?thanks! Link to comment Share on other sites More sharing options...
scott100 Posted May 13, 2006 Share Posted May 13, 2006 confused, whats with all the code?thanks!<{POST_SNAPBACK}> That's what it takes, mainly cause IE doesnt support fixed positioning Link to comment Share on other sites More sharing options...
turtle Posted May 13, 2006 Author Share Posted May 13, 2006 That's what it takes, mainly cause IE doesnt support fixed positioning<{POST_SNAPBACK}> ok, also whats with the layers, is that what IE doesnt support?because the image is the top layer.... Link to comment Share on other sites More sharing options...
turtle Posted May 13, 2006 Author Share Posted May 13, 2006 ok, also whats with the layers, is that what IE doesnt support?because the image is the top layer....<{POST_SNAPBACK}> Also, again, sorry and thanks..... if i wanted to keep the styles in the css would i just copy and paste it, or does something work diffrent with external styles?html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}#background{position:absolute;z-index:1; width:100%; height:100%;}#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} #content {padding:5px 300px 20px 200px;} Link to comment Share on other sites More sharing options...
scott100 Posted May 13, 2006 Share Posted May 13, 2006 Also, again, sorry and thanks..... if i wanted to keep the styles in the css would i just copy and paste it, or does something work diffrent with external styles?<{POST_SNAPBACK}> No it works the same, just copy everything between the <style></style> tags a paste it in your external .cssThen link it in of course Link to comment Share on other sites More sharing options...
scott100 Posted May 13, 2006 Share Posted May 13, 2006 ok, also whats with the layers, is that what IE doesnt support?<{POST_SNAPBACK}> IE doesnt support position:fixed so you have to use a workaround. 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