Twister1004 Posted November 26, 2008 Share Posted November 26, 2008 Hey everyone! I'm just facing difficulties. How do I get a picture say about a 600*400 picture on a website to just expand to the WHOLE web browser? Its kinda difficult to explain what I want xD. If you wanna see what i'm talking about go here, http://twistablepie.servegame.com/wow/ And help, hints, tips, or etc, is very appreciated. Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 26, 2008 Share Posted November 26, 2008 Do <style type="text/css"> body{ background: #FFFFFF url('image.gif'); } It will set the background to that image in the entire page. Quote Link to comment Share on other sites More sharing options...
Twister1004 Posted November 26, 2008 Author Share Posted November 26, 2008 That didn't work. D=. Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 26, 2008 Share Posted November 26, 2008 What do you mean it didnt work. Did the picture show up at all? Quote Link to comment Share on other sites More sharing options...
Twister1004 Posted November 26, 2008 Author Share Posted November 26, 2008 Yes the picture showed up, it just didn't expand though the whole browser. Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 27, 2008 Share Posted November 27, 2008 Can you post a link or your code... Quote Link to comment Share on other sites More sharing options...
Maq Posted November 27, 2008 Share Posted November 27, 2008 Hey everyone! I'm just facing difficulties. How do I get a picture say about a 600*400 picture on a website to just expand to the WHOLE web browser? Its kinda difficult to explain what I want xD. If you wanna see what i'm talking about go here, http://twistablepie.servegame.com/wow/ And help, hints, tips, or etc, is very appreciated. This doesn't even relate to your question. The link you provided is just a black background with some text... I think what you need to do is set the width and height to 100%. Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 27, 2008 Share Posted November 27, 2008 Oh Sorry I didn't even notice you gave a link in your first post. Quote Link to comment Share on other sites More sharing options...
Twister1004 Posted November 27, 2008 Author Share Posted November 27, 2008 Lol, I kinda forgot to move the link X_X, my bad. http://abysmalwow.servebbs.org/wow/testing.php Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 27, 2008 Share Posted November 27, 2008 Wow dude seriously... You have this background-image:url(images/default.jpg); which would make it so it doesn't stretch as the entire page.... Use this code please, it works note that it doesnt center the image and it doesnt look too great with nothing on the right side, but it stretches as the entire background image <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <style type="text/css"> body{ background-image:url(images/default.jpg); background-repeat:no-repeat; width:99%; height:99%; } </style> </head> <body> </body> </html> Quote Link to comment Share on other sites More sharing options...
Twister1004 Posted November 28, 2008 Author Share Posted November 28, 2008 That code you posted did not alter anything. Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 28, 2008 Share Posted November 28, 2008 You cant stretch an image with css. Try making the picture smaller or align the image to the center then apply a black background. This code does everything but align it to the center <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <base href="http://abysmalwow.servebbs.org/wow/" /> <style type="text/css"> body{ background: #000000 url('images/default.jpg') no-repeat; width:100%; height:100%; } </style> </head> <body> </body> </html> Quote Link to comment Share on other sites More sharing options...
haku Posted November 29, 2008 Share Posted November 29, 2008 You can't stretch a background image with css, but you can stretch an image in an image tag with css. <img src="/path/to/file.jpg" /> img { width: 100%; } But it's just going to pixelate your image, and it won't look good. I would recommend against this. Quote Link to comment Share on other sites More sharing options...
BoltZ Posted November 29, 2008 Share Posted November 29, 2008 Heh all that work and it took me a week to remember you can't stretch a background image. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted November 30, 2008 Share Posted November 30, 2008 You mean something like this... http://www.cssplay.co.uk/layouts/background not my cup of tea but if it floats your boat. Quote Link to comment Share on other sites More sharing options...
Scozzy Posted December 2, 2008 Share Posted December 2, 2008 I didn't know about that coding used with the background Rabbit image, but I did wonder about something else. Would it not be easier to set your would-be background image as the lowest Div layer, in a set of Divs on a page? I mean the draggable ones in Dreamweaver, of course I don't know for sure, but I thought there was some coding in those float-around Divs that allows for stretching an image or other coded value to 100% the width of the Div tag. By this logic and finally getting to my point, Perhaps if you set the Div tag to 100% width of the web browser, this in turn could stretch the image to whatever size the web browser happens to be, on a per-user basis. Am I on-track or am I going nowhere? Quote Link to comment Share on other sites More sharing options...
haku Posted December 2, 2008 Share Posted December 2, 2008 You can't stretch background images. Quote Link to comment Share on other sites More sharing options...
BoltZ Posted December 2, 2008 Share Posted December 2, 2008 You can't stretch background images but you can stretch regular images. If you want a backgroundimage that fits the entire page then create a huge one. Or create a smaller one and tile it Quote Link to comment Share on other sites More sharing options...
haku Posted December 3, 2008 Share Posted December 3, 2008 You can't stretch background images but you can stretch regular images. That's what I said about 8 posts back. Quote Link to comment Share on other sites More sharing options...
BoltZ Posted December 3, 2008 Share Posted December 3, 2008 Ok..? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.