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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.