Windows 8 Quick Tip Adding a Background Image
If you’ve been reading my blog, you’ve probably read that my first Windows App is now available. [Store Page]
And, if you’ve been reading my Twitter feed, then you know that I have a few more apps in the submission queue.
One of the key take-aways from my the App Excellence Lab last Summer was adding a state flag to the background of each area code and state page in my app.
I liked the idea so much, that in my next app “DC Traffic,” I did something very similar.
As a CSS n00b, I had quite the struggle achieving the look I wanted: a background image that consumed the whole page with just a hint of lowered opacity.
To save you the trouble, here’s how I did it.
Add the following to your CSS file (use default.css if you plan on doing this on more than one page)
.backgroundImage { opacity: 0.25; width: 100%;
height: 100%;
z-index: -1; position: -ms-page;
}
Then add the following img tag right after the <body> tag:
<img id="backgroundImage" class="backgroundImage" src="/images/scenery/Washington_Monument.jpg" >
Naturally, you’ll need to change the value of the src attribute to what makes sense for your app.
If you need more help getting started with your Windows 8 app, then sign up now at Generation App for free tips and tricks.