when using css with a main and body. how can i tell the background image to be 100% width and height of a browser window so the sides of my page get filled in any resolution?
currently have it
background : #ffffff url(‘ball.jpg’) fixed center;
but the image is currently about 100kb and 1358x933
can this be smaller and still fill any pc monitor res
the image is a picture so i dont want it repeating
If you want a background image to span the whole width of the monitor you just have to make the image wide enough so that it can. Around 2000px wide should do it.
If you centre the image the excess will drop off the left and the right so you have to account for this. The detail at the edges can’t be critical as it wont be visible on most monitors. This is a common technique and used on lots of websites, see my twitter page for example http://twitter.com/higgidy. This is not centred but you get the idea, try resizing the window.
The other solution is to use an actual image, not a background image, position it absolutely behind the other content, then resize that in the browser: http://css-tricks.com/how-to-resizeable-background-image/
Most designers don’t do this though as browser image resizing is a bit dirty though and won’t look nice in older versions of IE.
Good luck with it! 
thanks, 2000 will lose what i want showing, would "top left be better than centre?
or what size width would be most universal, currently ok on my screen res 1280 x 1024
is there any good simulators to see it in other resoloutions?
ahh found one
now that opens another issue i have my css in px not %
“top left” is fine, it all depends on what effect you want to achieve and where the focus of your image is. On the higgidy twitter page the focus is on the top left.
Here are some websites that use wide background images to really good effect: http://www.webdesignerwall.com/trends/80-large-background-websites/
There’s a good list of common screen resolutions on w3 counter: http://www.w3counter.com/globalstats.php. As for a simulator, you could use the zoom out option on FF or Chrome to simulate a larger screen, or the web developer toolbar has a useful browser resize option to see smaller sizes.
Good luck with it!
ok took the easy way out used an image that can repeat.