Resize Homepage/Background? Use % insted of px?

[orrevs]

If you look at my page http://chili.tummelsta.se

It looks great for me. But once i change my screen resolution it does not look that great. Or if i resize the browser window. Se pictures. Site.jpg = the site as it should look and does look in my browser.

 

rezised.jpg is when i resize the browser window.

 

The logo does not resize and the background stays the same which makes the menu for example unusable as you cant see the text.

 

 

I can think of two ways of fixing it.

 

1. Get a white background on the menu.

 

2. Try to make the page more dynamic and use % instead of px.

 

3. Downscale the background and logo. so it would fit on 1280x1024. (I dont know how to do this)

 

4. Have two or more CSS files and a script that use right css for the right screen resolution.

 

 

 

I would prefer step 2 if its even possible, my question is what is the best way of doing this.

This has to be a "normal" issue i guess so maybe there is some easy fix to make?

Is there some rules i should think of when making the theme. Like always make a theme for 1280x1024 screen size or something?

 

 

Am grateful for all help and tips i can get.

 

 

 

//Oscar

Edited May 3, 2013 by orrevs (see edit history)

[orrevs]

Ok, i figured it out kinda.

 

I use @media screen and (max-width: XXXXpx)

And it now works like a charm. But as i understand this is only for new browsers so am still after some kind of javascript or similar to choice another CSS file. If anyone have any tips. I saw a thread about this in this forum but i dident really understand the script at all.