Browser resolution

[RedSkwirrell]

Hi all,1st time poster so please bear with me. I checked the tutorials (and other sites) but couldn't find my answer. Just wondering if any of you folks can help.I want to publish a webiste that will display in whatever resolution the browser is set to. IE: If I compose the background site images as 1024x768 px, I want it to re-size in browsers set to 800x600 px or 1280x960 px (stretch, or shrink, as necessary).Is it possible to control this using HTML or CSS code, or another way?I saw a method (years ago mind you) to determine the preset resolutions of visiting browsers, but I don't really want to publish loads of different sized sites and then re-direct according to every visitors' resolution.The only method I've managed to come up with is to compose everything as 800x600 and to display a header image at the top and in the centre of the page with a CSS repeating image beneath. It works for the height of the page, or the width depending on the CSS command, but not both together.I'm posting this in the HTML and CSS sections as I'm not sure which would be appropriate. Apologies at once if I have defiled the forum and should be executed. Did I mention Skwirrells are the exeCutest?

[Skemcin]

theorically, yes, you can do this. There are javascripts out there that will not necissarily discover the client screen rsolution, but at least the viewable space within the browser window.From that, you could set variables for certain circumstances and then have the javascript write out the appropriate CSS file to use.This would imply that you would need a CSS file for each of teh screen resolutions you want to code for.

[ColMatrix]

Hi m8Ok I THINK with Javascript it can detect the users browser and can retrieve information on their settings and depending on the settings can load up different information relevant to the users setting (Not know Javascript really, so not help you their, sorry).You are wanting a image in the background...is this a image that is tiny which can be repeated throughout the background? to create a pattern?If it is mainly a background colour with a image somewhere on it (eg bottom left) you could give the background a block of colour and cut the image down to a particular size, and position the image to the bottom right (or whereever) using CSS.The background (block color) would adjust when the user resizes the screen (using css and giving the background colour height and width values in %) but the images (giving values in px) would not change size.I hope I have understood your query, and the info helps.Col

[RedSkwirrell]

Thanks for the replies guys.Col Matrix, Sort of.At the moment I'm making a web page from an image, which is the basis for the theme of several pages of the same site, and this will fully occupy a screen resolution of 800x600.Because many browsers use 1024x768 now, I set the background to a plain colour and display the image centrally so this background looks like part of the image display. I can get the image to repeat vertically (see below) as far as it's required by the visitor's browser, so the whole image appears to be a column with no top or bottom on the page.In fact, the image, which makes up the whole of the page, has been broken into two main slice sections (the header section has been re-sliced for various button components);I have sliced the header, with the nav buttons, out and overlaid this into an absolute position at the top centre of the finished page (wasn't sure if I could do this within a CSS file as I'm only starting out with CSS).Then I've taken an 800 px wide x 1 px high splice out of the middle of the image and I use a CSS file to repeat this, however high the image displays so it doesn't matter how much text I put on the page, nor what resolution the browser is set to, it will always repeat enough for the entire display.The header appears within this vertical column but displays as part of an imageI can also do the same via a horizontal display where the display will extend to the right for as long as I want it to repeat.What I'd like to do is combine both, so that the vertical and horizontal displays stretch or contract to whatever resolution the page is being viewed at. Then I could compose the whole page in 800x600 and it would still appear exactly as it was designed in 1024x768 (rather than having edges added to it) and I could incorporate other components (graphic or text) as part of the image itself.

[Err]

http://javascript.internet.com/user-detail...resolution.htmlThat should help you

[DarkElf]

Do you actually want your image to stretch or shrink in proportion with the screen resolution, or do you just want it stretch or shrink in proportion to the browser window? (for a example a banner that would span the entire window exactly no matter the resolution)I don't want to even think about the former, however if the later is your preference then I have a far simpler solution which avoids any use of JS etc.The html image tag has a width and height attribute (this can and in most cases should be manipulated through CSS instead of actually in the html). This allows you to define the width and height of the image to be something other than the default, if you only define one the browser maintains the correct proportions. As well as defining this in pixels or cm you can also define it as a % of the browser window, therefore an element with width="100%" will always span the entire screen.The only problem with this is that if people resize their browser window the image automatically resizes with it.

[RedSkwirrell]

Ahhhhhh thx guys,Dark; Yep, sry I mean the browser window itself, and the CSS % attribute is what I think I need. Didn't know you could do it in %, so thx very much. I'll play about with it and do some experimenting.I'll leave a hazlenut on your bird-table in the morning!

[DarkElf]

Mmmmm, hazel nuts.....Glad to have been a help

[RedSkwirrell]

Nice link RahZephon.Only just had a chance to check it out properly.Like your sig as well.

[Err]

thanks i like it too . glad i can be of some help.