*background problem when screen resolution changes
 

Well I got a website I want to code and I'm not too good in coding though I'm designing/coding websites for 2-3 years(ocassional hobby).I always tried and retried and asked and searched but I always got side effects.So I want to make this one by-the-book 100% XHTML Strict/transitional W3C Valid So I was thinking where should I start with and I thought I should start with the background.I can't seem to manage even this one. As in every single thing I ever done I can't get it to look the same in every evil screen resolution
....Enough talking.As you see in the picture it has 2 parts. the first is a gradient from blue to white(bottom to top) and the other part is a black pattern thing. How can I implement it?I can't simply adjust it's size to fit my resolution and browser.It needs to look the same for everyone.
Also while the top part can be made with a vertical 1px slice the bottom one has a pattern so it can't. i was thinking I could divide the website in 2 DIVS:main and footer and set a height percentage % like 80&20 from CSS.Use as background for main a vertical slice and a big image for the footer.But still that wouldn't fix too much ...I don't know. What would you do if it was your website?