I am wondering if there are a css for background image that can be sized for all of resolution of monitor? Because I tried to photoshop a background for my site, and then it ended up smaller, then bigger, and on.
Nope. You're going to have to go with a fixed width, I'm afraid. What you can do though is go with a panoramic effect, setting the position of the background image to the top left corner, then use a really wide image. Obviously the container won't be a fixed size, but will be able to let its width expand or contract depending on how much space is available.
You COULD create several versions of the background image, each with a different width reflecting the most popular screen size/resoutions. You could then incorporate a javascript routine to determine what screen size a current visitor has, and selects/sets the body background image accordingly. Meow Purr.
Which will just add bloat, and can actually hinder the usability and accessibility of the Web page. Techniques such as "Switchy McLayout" are examples of this type of detitrus, and should be actively avoided like the plague at all costs.
I agree with the principle of what you say Dan, but I think it's a trifle harsh in this particular case. If we assume that - at any given moment in time - there are only 3 popular screen resolutions, then it would only take 6-7 lines of script to accomplish the task. I think that's a reasonable compromise ? Meow Purr.
The problem is though, screen resolutions are meaningless. All that matters is the dimensions of the browser's viewport.
Yes, ships-cat, you are right, and besides, you can use a fall-back to minimise the impact on accessibility etc. And Dan, in the case of background images, screen resolutions are not so meaningless because many have browsers maximised and if they don't, it is not much of an issue anyway, they just have to download a few extra bytes for the part of the image they don't see.
I must admit that, whillst I've tested the Javascript "Switchy Mclayout" technique (as Dan so bewitchingly describes it), I've never actually used it on a production website. I tend to be McControl-freak McFascist, and set all of my site content within a fixed-width master <div> tag. (usually 1000px wide, or slightly under). I'll then choose a <body> background colour that is reassonably complementary to the overall content colour scheme. This constraining <div> gives me far more accurate control of HTML flow, and removes uncertainties. This works quite well if someone is using a 1024 screen (and their view portal is maximised). Of course, if a visitor has some huge wopping 4000-px-wide CAD monitor, then my website looks like a postcard huddled up in the top left hand corner, lost and awash in a sea of background colour. And if someone has an 800x600 screen, then they get a horizontal scroll-bar. But then.... they knew the risks when they bought their monitors. Meow Purr.
You can use CSS centering; something like: .imgstyle{background:#fff url(background_image.jpg) center center;} This way you would need to set reasonably large image so it would be bigger than most screens. On smaller screens it would appear larger and cropped.