Greetings!
How to use an imported image as a background image is covered in the
Wiki's FAQ.
However, I'd like the background image to:
- Fill entire page, no white space;
- Scale as needed;
- Retain proportions (aspect ratio);
- Be centered on page;
- Not cause scrollbars;
- Be as cross-browser compatible as possible.
That said, I found this page:
http://css-tricks.com/perfect-full-page-background-image/It gives several options, but none are perfect when you include IE 8. I'd hate to prevent people still running Windows XP from playing my game.
Putting this in the stylesheet will do everything I want for all other browsers:
html {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Replacing "url(background.jpg)" with "[img[background]]" doesn't work, of course.
It's 3 a.m. and I'm about ready to drop from all the CSS I've learned today, this being the first day I've ever sat down and tried to learn the fundamentals. So, the answer is probably simple, but I'm too nebish and sleepy to figure it out.
Any help or suggestions are appreciated!
Thanks!
Comments
Also, the other vendor prefixes no longer exist for the background-size property so I believe you're wasting characters in that regard.
Also, there's no way to use an integrated image there?