Jump to content

How to stretch a picture?


Twister1004

Recommended Posts

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

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

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

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

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.