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. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/ 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. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-699463 Share on other sites More sharing options...
Twister1004 Posted November 26, 2008 Author Share Posted November 26, 2008 That didn't work. D=. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-699569 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? Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-699648 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. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-699676 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... Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-699930 Share on other sites More sharing options...
Maq Posted November 27, 2008 Share Posted November 27, 2008 Quote 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%. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-699959 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. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-700091 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 Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-700214 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> Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-700677 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. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-701034 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> Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-701170 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. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-701467 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. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-701741 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. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-701984 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? Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-703878 Share on other sites More sharing options...
haku Posted December 2, 2008 Share Posted December 2, 2008 You can't stretch background images. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-703890 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 Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-704249 Share on other sites More sharing options...
haku Posted December 3, 2008 Share Posted December 3, 2008 Quote You can't stretch background images but you can stretch regular images. That's what I said about 8 posts back. Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-704513 Share on other sites More sharing options...
BoltZ Posted December 3, 2008 Share Posted December 3, 2008 Ok..? Link to comment https://forums.phpfreaks.com/topic/134319-how-to-stretch-a-picture/#findComment-704543 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.