website image query – please help

NH
Posted By
Neil Hindry
Sep 22, 2005
Views
610
Replies
12
Status
Closed
I wonder if you can help me.

I am about to start creating my first website. I want to have an image that fills the screen but I am not sure what size to make my image. I know people have their screens set at different resolutions,.

If mine is set to 800×600 and I make my image 800×600 when someone else views my website on their screen with a resolution of 1280×1024 the image will be too small and won’t fill the screen.

What can I do to make my image fill the screen on my website no matter what resolution other people are using?

Please do not be too technical as I am a novice.

I hope you can help me.

I appreciate any help or information given.

Thanks!



———————————————————— ————- FIGHT BACK AGAINST SPAM!
Download Spam Inspector, the Award Winning Anti-Spam Filter http://mail.giantcompany.com

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

TT
Tom Thomas
Sep 22, 2005
"Neil Hindry" wrote:

What can I do to make my image fill the screen on my website no matter what resolution other people are using?

Please do not be too technical as I am a novice.

You can’t. Actually, Internet Explorer (Windows version) will accept an image tag the the size attributes set to 100% x 100% and it will scale the image to fill the screen. Not sure about other browsers. But, you can’t control the aspect ratio of the viewer’s browser — and remember most people running large, high resolution monitors don’t browse in full screen windows — so your image will never look right.

The best you can do is use some kind of tiled background, and get used to the fact that in web design you have to adapt to the viewer — not the other way around.
——————
Tom

Unsolicited advertisements cheerfully ignored.
B
BubblyBabs
Sep 22, 2005
In the previous message Neil Hindry
wrote:

I wonder if you can help me.

I am about to start creating my first website. I want to have an image that fills the screen but I am not sure what size to make my image.
I know people have their screens set at different resolutions,.
If mine is set to 800×600 and I make my image 800×600 when someone else views my website on their screen with a resolution of 1280×1024 the image will be too small and won’t fill the screen.

What can I do to make my image fill the screen on my website no matter what resolution other people are using?

Please do not be too technical as I am a novice.

I hope you can help me.

I appreciate any help or information given.

Thanks!

It would be best to have a tiled background but if you wish to use an image I’d use 1024×768 to ensure at least someone with that size resolution can see your whole image though 800x600is a popular size as well… And just be sure your image isn’t so huge in file size that people will get too impatient for it to load and leave your website… And be sure it’s not so busy that people can’t read your words…

I don’t know how to make it so that the image will fill up your webpage background no matter what the person’s resolution is w/o java… Not everyone has java so I’d avoid it for that use but that’s just me…

You could try this:
<body bgcolor="#ffffd7" text="#000000" link="#400040" vlink="#400000"
alink="#800000" background="backgroundimage.jpg" STYLE="background-repeat: no-repeat; background-attachment: fixed; background-position: top center;" >

The bgcolor, text, link, vlink, alink colors are what you want… The background image will be to the top center of your webpage… Hope that helps…

Babs
FN
Flo Nelson
Sep 22, 2005
"Neil Hindry" wrote in message
I wonder if you can help me.

I am about to start creating my first website. I want to have an image that fills the screen but I am not sure what size to make my image. I know people have their screens set at different resolutions,.
If mine is set to 800×600 and I make my image 800×600 when someone else views my website on their screen with a resolution of 1280×1024 the image will be too small and won’t fill the screen.

What can I do to make my image fill the screen on my website no matter what resolution other people are using?

Please do not be too technical as I am a novice.

I hope you can help me.

I appreciate any help or information given.

Thanks!

It’s not a good idea to use such a large image anyway (even 800 by 600) – you would have to make the quality very low to make the page load quickly enough so that you don’t lose visitors. It’s usually better to use a smaller image and then fill in the rest of the space with a background color or a small image that tiles.

If you’re structuring the page with tables, you can make different background tiles for different cells (or if you use divs, the same applies) and get more interesting results that way.

Flo
T
Tacit
Sep 23, 2005
In article <43329e2f$0$318$>,
"Neil Hindry" wrote:

If mine is set to 800×600 and I make my image 800×600 when someone else views my website on their screen with a resolution of 1280×1024 the image will be too small and won’t fill the screen.

What can I do to make my image fill the screen on my website no matter what resolution other people are using?

Step 1: You can’t.

Step 2: Don’t try. You’ll end up with an image far, far too large for people on dialup to download. If your page loads too slowly, people will not visit it.


Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
J
jaSPAMc
Sep 23, 2005
On Fri, 23 Sep 2005 02:21:06 GMT, tacit found these unused words floating about:

In article <43329e2f$0$318$>,
"Neil Hindry" wrote:

If mine is set to 800×600 and I make my image 800×600 when someone else views my website on their screen with a resolution of 1280×1024 the image will be too small and won’t fill the screen.

What can I do to make my image fill the screen on my website no matter what resolution other people are using?

Step 1: You can’t.

You can, use ‘percent’ as the width and height. However point 2 comes into play as you have to provide an image large enough that the biggest setting won’t ‘oversize’ and degenerate into visible pixels.

Step 2: Don’t try. You’ll end up with an image far, far too large for people on dialup to download. If your page loads too slowly, people will not visit it.
T
Tacit
Sep 23, 2005
In article ,
J. A. Mc. wrote:

You can, use ‘percent’ as the width and height. However point 2 comes into play as you have to provide an image large enough that the biggest setting won’t ‘oversize’ and degenerate into visible pixels.

Browsers do not resample an image; they merely stretch or squash it, which produces results even worse than Photoshop’s "nearest neighbor" resampling. If you do this, the image will look like crap at any size other than its "native" size, even if it is made smaller rather than larger.


Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
J
jaSPAMc
Sep 23, 2005
On Fri, 23 Sep 2005 14:53:17 GMT, tacit found these unused words floating about:

In article ,
J. A. Mc. wrote:

You can, use ‘percent’ as the width and height. However point 2 comes into play as you have to provide an image large enough that the biggest setting won’t ‘oversize’ and degenerate into visible pixels.

Browsers do not resample an image; they merely stretch or squash it, which produces results even worse than Photoshop’s "nearest neighbor" resampling. If you do this, the image will look like crap at any size other than its "native" size, even if it is made smaller rather than larger.

Where did I mention ‘resampling’ ???

DO try to ‘read’ …

What it looks like and what some want to accept to achieve an effect is personal choice and OPINION.
HL
Harry Limey
Sep 23, 2005
"J. A. Mc." wrote in message n

Where did I mention ‘resampling’ ???

DO try to ‘read’ …

Tacit’s message does not say that ‘You’ mention resampling!! He merely points out how browsers work.
Maybe you should ‘read’ his message again!
MR
Mike Russell
Sep 23, 2005
What Tacit said, plus:

One way to deal with multiple resolutions is to access the client’s screen size in a script, and use a different source image, or a different web page altogether, depending on the resolution. Here’s a link to one example.

http://www.htmlgoodies.com/beyond/javascript/article.php/347 1261

This is a bit of trouble to set up, but it’s not that bad, particularly if it’s important to have maximum control over what the image looks like on a wide variety of screen sizes.

Mike Russell
www.curvemeister.com
K
KatWoman
Sep 24, 2005
"Mike Russell" wrote in message
What Tacit said, plus:

One way to deal with multiple resolutions is to access the client’s screen size in a script, and use a different source image, or a different web page altogether, depending on the resolution. Here’s a link to one example.

http://www.htmlgoodies.com/beyond/javascript/article.php/347 1261
This is a bit of trouble to set up, but it’s not that bad, particularly if it’s important to have maximum control over what the image looks like on a wide variety of screen sizes.

Mike Russell
www.curvemeister.com
a wonderful tidbit for design conscious web designers thanks for sharing

web design is much more complex than I ever anticipated with the variety of viewer/browsers, various monitor sizes and resolutions, everything from looking good on a cell phone to large hi-def TV’s.
So many programs to master to create nice pages. At least most of us PS users have an advantage how to prepare the images for websites properly. I learned a lot in the FrontPage newsgroup too.
TT
Tom Thomas
Sep 26, 2005
"Mike Russell" wrote:

One way to deal with multiple resolutions is to access the client’s screen size in a script, and use a different source image, or a different web page altogether, depending on the resolution. Here’s a link to one example.
http://www.htmlgoodies.com/beyond/javascript/article.php/347 1261

—- snip —-

This is a clever solution but it fails to recognize something I mentioned way back at the beginning of this thread. Simply knowing someone’s screen resolution doesn’t really give you a true idea of what size their browser window is. I can’t imagine anyone using 1280 x 1024 actually running their browser at full screen. On my 21" monitor at 1600 x 1200 my browser is in a window that is approximately 800 x 600 — one quarter of the total screen size.

This isn’t a web design newsgroup so I’ll not go off on a tangent except to reiterate my point that proper design adapts to the user’s circumstances. A well designed page will look good at many resolutions and window sizes.
——————
Tom

Unsolicited advertisements cheerfully ignored.
B
Basileus
Jul 9, 2006
Neil Hindry wrote:
I wonder if you can help me.

I am about to start creating my first website. I want to have an image that fills the screen but I am not sure what size to make my image. I know people have their screens set at different resolutions,.
If mine is set to 800×600 and I make my image 800×600 when someone else views my website on their screen with a resolution of 1280×1024 the image will be too small and won’t fill the screen.

What can I do to make my image fill the screen on my website no matter what resolution other people are using?

Please do not be too technical as I am a novice.

I hope you can help me.

I appreciate any help or information given.

Thanks!
you could always just use flash. raster images are going to get all goofy as they’re resized to fill whatever the browser size is at, and while you can have it so it automatically resizes to fill the browser window you cant set it up to change the aspect ratio so there’s still the possibility of having blank space on the sides. Ultimately though the others are right. make a nice image to tile for the background or just stick with a single plain color. complex backgrounds are annoying on websites unless they’re done just right anyhow.

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

Related Discussion Topics

Nice and short text about related topics in discussion sections