TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

Members
Stats
  • Total Posts: 196,021
  • Total Topics: 21,332
  • Online today: 496
  • Online ever: 8,223 (February 19, 2025, 04:35:35 AM)
Users Online
  • Users: 0
  • Guests: 101
  • Total: 101

background adjustment to screen res

Started by Sforzando, September 28, 2006, 01:43:48 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Sforzando

I posted about getting help for flash, but the topic is different now, so sorry, hope nobody minds that I'm starting a new topic on it-

The reason I'm so interested in flash is mainly that in flash, you don't have to worry about screen res. My pages have images as the background, and the problem with html is you have to choose between a tiled pattern background or a solid color background- in order to have a single image as the background in html, you have to put the image in a table. I then layered all my content over the table.
The problem is, even if I tell the table to take up 100% of the screen width, it doesn't fill up the height. And the image gets distorted when you try to fill the screen. So I had to define everything for 1024 by 768, and use an image of that size. That means there are ugly blank spaces for viewers with screen res larger than 1024 by 768.
  The problem gets worse, because the next thing I decided to do was slice the background image into pieces. I then removed a large slice. And then I used that space as an internal frame with a scrollbar, and put my content in it. So now, instead of having all my content layered on a 1024 by 768 background image, I have all my content as an internal frame that takes up a piece of that 1024 by 768 background image.
   Either way, there are awful blank spaces for ppl with screens bigger than 1024 by 768. So html is really limited when it comes to background. But with flash, everything automatically fits the screen and you don't have to worry about screen res. And that's the main reason I'd like to go flash.
      to this Ichbin replied brilliantly,
Quote from: IchBinâââ,¬Å¾Ã,¢ on September 28, 2006, 01:24:27 PM
How does flash fix screen resolution? Flash files are limited by size also? I think one thing you may want to look into is adding a different style sheet for each resolution, and then use some Javascript to detect a persons resolution. Just googled for you and here's a sample of how it works.


Code:
<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
window.location="highres.html";
}
else
{
 window.location="lowres.html";
}
//-->
</SCRIPT>

But now I'm thinking, if there is a different style sheet for each resolution, that wouldn't affect the background image and frames...would I have to make a whole new set of pages, like a copy of my site but with a different sized bg image, for each screen res? And then, after detecting it, the appropriate copy of the site would appear? Or is there an easier way?
I'd really appreciate any input

Porky

I don't know anything about Flash but if you just set your image in your html to a width of 96% and a Height of 96% it will addjust for what ever screen resolution people are using... But keep in mind you want to make you background at leat 1024x768 so it will ajust right and have a better quailty. Now if some one is using a resolution higher than 1024x768 then you might want to make your background larger so it will expanded and still look good.

Sforzando

Quote from: humanporkrind on September 28, 2006, 02:10:50 PM
set your image in your html to a width of 96% and a Height of 96% it will addjust for what ever screen resolution people are using...
Thanks, however,I tried this before, but it distorts the image. To have 100% width, height is sacrificed. To have 100% height, width is sacrificed. Having both makes the image stretch out of proportion. So only one dimension can be set as 100% and then the other dimension adjusts accordingly.
   If I make the image bigger than 1024 by 768, I get an annoying scroll for anyone who actually has 1024 by 768. What I'd like is for the bg image to fit the screen res of whoever is viewing the page.

IchBin

Well you can probably do it a number of ways. One thing you can do is of course, have it display a different page for each resolution. Thats not optimal though. Even better would be to say to the browser, "Hey Browser! If someone has 1024x768 display this background. If somone has 800x600 then display this background." :)

You can do exactly that with the javascript I posted. Detect someones resolution and display a page, or a backgroud, or have it use a completely different style sheet which holds all your background properties for different resolutions.

Sforzando

Thanks, that's a great idea.
But it means I can't use internal frames anymore, right? I wouldn't be able to slice my image and replace one slice with a frame that holds my content, like a window within a window...am I misunderstanding you or is it still possible to do that with style sheets? Because if it can't, I would have to go back to layering the content over the bg image instead of as an interal frame, and layering it like that just isn't as visually appealing.

IchBin

You'd probably have to put the script in both frames.

Xarcell

You need to tile your backgrounds, and set widths and height's of your tablecells. Also align your images....


Sforzando

Quote from: IchBinÃ,â,,¢ on September 28, 2006, 04:08:12 PM
You'd probably have to put the script in both frames.
Thanks so much! I think that solves my problem, and I no longer need to think about all flash.
Thanks!!

IchBin

When you get it working like you want post a link so we can check it out. :)

This website is proudly hosted on Crocweb Cloud Website Hosting.