Scaled Background Image

[Demonwolf]

Hey all.I have to create a backdrop to be used at schools as an active desktop. There is no standard for the desktop resolution because each student has their own personal preference. My issue is that our background on the webpage is not easily resized to their current resolution. I have managed to get the tables, text, links and everything else all lined up and fitting wonderfully on most monitors from the 800x600 resolutions all the way up to the odd sizes of the 22" wide monitors. Only thing I cannot figure out, is the background image.Currently I have "background:#000000 url('/image location/') no-repeat center center" details calling in my background. It shows up but I have no idea how to make it scale down to the right size relative to the resolution.I'm still relatively new to all this and using html with a splash of CSS styles embedded (ie: <table width="100%" height="100%" style="background:#ffffff url(/image location/') no-repeat center center" border="0"> to call a slightly different backdrop on my table compared to my basic desktop) as it doesn't have to be too big and fancy with as few files as possible.Help would be appreciated.Thanks

[roundcorners]

background images won't resize, but you can repeat a small image to resize vertically and/or horizontally.Inline images will resize, perhaps you could set a background image on the body element with a position of relative and set the rest of the content to position: absolute???

[Demonwolf]

background images won't resize, but you can repeat a small image to resize vertically and/or horizontally.Inline images will resize, perhaps you could set a background image on the body element with a position of relative and set the rest of the content to position: absolute???

I'm sorry... but WHAT?! Very little of that made sense. Okay, I got that backdrops won't resize. Inline images? Are those images inserted with the "img" line but with text over them? How would I do that? And how do I set absolute and relative (I wish knew what that means)? Like I said... I'm relatively new to all this...Thanks for telling me backgrounds won't resize though, means I won't spend the next two nights fighting to figure that out.

[ProblemHelpPlease]

I'm confused over whether you are trying to align a page background with the contents of a table? You would find things a lot easier usign div's rather than tables, either way you may be better off displaying the background as a table background rather/or combined with a page background.You could use a div that is the width and height of the page ( using width: 100%; height: 100% ) containing and image with the same width and height settings. If you use z-index in css you can make it appear behind all other items on the page. You are always going to struggle with distortion of the image when displaying on different aspect ratios.

[pizzaguy]

Using CSS 3 you can make the background image resize (how ever it may not work on all browsers)Take a look at this link, and scroll down to the heading "New Property: Background Size".In short, all you need to do is add:

background-size: contain;

which scales down image to fit element (maintaining pixel aspect ratio).

background-size: cover;

which expands image to fill element (maintaining pixel aspect ratio).