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?

Try this, make the background image (the black bar) thin about like this, with the full height:

 

[]

[]

[]

[]

[]

[]

 

Then, tile it (repeat-x).

 

Also do that with the gradient.

 

Report any problems back here.

ok,I managed to solve it.I made 2 divs like I said body_main and body_footer

#body_main {
background: url(images/main_background.png) repeat-x;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 748px;
}
#body_footer {
background: url(images/footer_background.png);
position: absolute;
top: 748px;
left: 0px;
right: 0px;
height: 270px;
}

 

I tiled the gradient as you said and used a BIG 1920X1080 image of the black part as I couldn't tile it because it was a irregular texture.Not sure what the effect will be on the loading time but I hope it won't cause any problems.