Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Imported Images for Background

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

  • Well.... every major browser bar Safari has extant Win XP versions, so the XP cavepeople (which include myself) are definitely spoiled for choice re: browsers. (FWIW I only implemented XP support in Twine 1.4 out of personal obsessive-compulsion rather than the expectation that more than 7% of Twine players would ever use it.)

    Also, the other vendor prefixes no longer exist for the background-size property so I believe you're wasting characters in that regard.
  • So, you're saying just use:
    html {
    background: url(background.jpg) no-repeat center center fixed;
    background-size: cover;
    }
    Is that right?

    Also, there's no way to use an integrated image there?
  • The FAQ indicates the means of using an imported image:

    background-image: [img[image name here]];
  • html {
    background: [img[bg]] no-repeat center center fixed;
    background-size: cover;
    }
    The image seems to repeat vertically in FF/Google/IE at small resolution, which is no big deal to me.
    html {
    background: url(bg.jpg) no-repeat center center fixed;
    background-size: cover;
    }
    Works perfect in newest version of all three browsers.
  • OK, I'll fix that in 1.4.1.
Sign In or Register to comment.