Jump to content

Help with CSS Background.


turtle
 Share

Recommended Posts

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

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

cool! thanks, also do you know how to may text stay at the bottom of the page, through a scroll

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

also doesnt that leave the picture in the top layer, it is for me, how to i make it a lower layer?

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

cool! thanks, also do you know how to may text stay at the bottom of the page, through a scroll

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

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> 

confused, whats with all the code?thanks!
Link to comment
Share on other sites

ok, also whats with the layers, is that what IE doesnt support?because the image is the top layer....

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

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?

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...