Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

image Size % of Screen ? 2

Status
Not open for further replies.
CurtR

CurtR

Programmer
Aug 9, 2000
66
US
Hi folks ,
I am normally over on the Crystal Reports forum, But need help with a problem I am having with my site. I have a back ground image set in one of my pages. And while it looks fine to me at a my resolution, someone with lets say 600x480 is not seeing the whole picture.
Is there some way of setting the image size to a % of the screen size so everyone saw the same thing no matter what monitor resolution that they used?
This is what I have and where.

<body background=&quot;../../images/gatorbackground.jpg&quot; bgproperties=&quot;fixed&quot;>

Thanks
Curt
 
Sort by date Sort by votes
First of all you can always change your own res. to check things out; (Display Properties-->Settings)
For that issue: I checked your BG pic, it's an RGB image not an indexed one. So the best way is to save it as Save for Web, using Photoshop. This feature flattens the image and makes it resolution independent.
 
Upvote 0 Downvote
laleh,
I have started checking the resolution, but to be honest it is still kind of confusing to me, I have 3 monitors, 17,19,21 inch, they all look different to me.
I placed the picture in a frame last night, not the way that I wanted to handle it. but I know that I can size the frame using the Percent setting, and did so hoping that it would help those using the 600x480 resolution.
I just I need to check the photo cause I am using photoshop and saving for web.
Can you explain what you mean by flattening the image makes it resolution independent?
I will re-save the photo again and see what happens.
Thanks
Curt
 
Upvote 0 Downvote
Personally I dont think you need to worry about 600*480 res,
i dubt many people have such a resolution. If its ok in 800*600 and higher then it should be ok. IMHO

É **new site coming soon**
**don't visit just yet**
 
Upvote 0 Downvote
I would not of thought that this would of been an issue today either, however I put a poll up in the forum last night to ask just that, and while there are only 9 responses so far, 3 out of the 9 are using 600x480, and only 1 had a setting of 800x600, the others were at 1024x768.
So if this ratio holds true I guess we need to be mindfull that there are still more than a few.
Curt
 
Upvote 0 Downvote
Hmm
As a percentage of general visitors, only 2.39% have 600 x 480 on my site. (from logs)
1024x768 and 800 x 600 are about 45% each

you could make it to fit 1024x768 and put a link to change it for people with other resolutions?
further than that i'm not really sure how to change it.
i guess you could do it with javascript.
you'd need to call the size and then change the outputted image accordingly.
 
Upvote 0 Downvote
Technically, setting the image size to a % of the screen size is possible. You can write a script that checks user's screen resolution, or better the window size (check both availWidth and innerWidth properties for cross-browser solution). Then you can write the image code dynamically using the values you got.

BUT you cannot do this without harming the image quality!!! That's why I extremely do not recommend to do this! Images that can be put on a webpage are raster. That's why any size change will cause quality reduction.

An alternative is flash - swf file can consists of vector objects and shapes only, and this allow you scale it's dimentions freely. You can insert it into a table cell that has width=100% and set swf file to relative size.

But, again, if it will contain any raster image inside, it will be jammed or stretched and will look very bad. Open any image file from your HDD, zoom it in and out and you'll see what will happen on a webpage.

 
Upvote 0 Downvote
So far having placed the image in a frame on the page seems to have corrected the problem enough for those that had wrote to tell me that they were having problems to be happy.
Thanks Everyone. I am totaly new to this and trying to learn on the run!
Curt
 
Upvote 0 Downvote
Curt,
Apparently you have solved the problem.
But what I meant by flattenning an image was making it as Indexed color mode rather than RGB mode. Which Saving for web does that automatically.
 
Upvote 0 Downvote
Valuable input, but I still have a question...
I have the same problem. Since NN and IE treat table cell background images differently, I have resorted to changing the STYLE tag to modify the position of the background image on the page for different resolutions. I can determine the resolution with javascript, but how do I modify the tag? I have tried external files with javascript, I have tried document.write inside of the tags, I have tried script inside of the style tag - nothing seems to work. What am I doing wrong??
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
666
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
734
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
219
jjgupta915
jjgupta915
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
176
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top