Windows 8 - Use image for background

Question

I'm creating my first Windows 8 app and I have a problem with CSS!

I have a folder images and background texture bg.png inside it. Also, stylesheet is in css folder.

CSS:

#contenthost {
  height: 100%;
  width: 100%;
  background: url("../images/bg.png") repeat;
}

But nothing happen! I tried background: #999 which works. What should I do?

As already answered on SO, URLs in CSS are relative to the CSS file, not to the HTML document http://stackoverflow.com/a/940475/268 — Vincent Robert, Oct 09 '12 at 12:32

score 2 · Accepted Answer · answered Oct 09 '12 at 10:35

I tried your example with path to the image relative to the app root and it worked without any issues:

#contenthost {
    height: 100%;
    width: 100%;
    background-image: url('/images/logo.png');
    background-repeat: repeat;
}

In terms of your code this would be:

#contenthost {
    height: 100%;
    width: 100%;
    background: url('/images/bg.png') repeat;
}

score 0 · Answer 2 · edited Feb 17 '14 at 10:52

If it is not the path (using absolute vs. relative as above would fix that) you also need to make sure you have an element with an id = contenthost.

CSS let's you do both id and classes so if you start getting into styling page controls you will see a heavy use of classes like (.mypage .subsection).

Finally, you can always set the background in any individual html file directly on the body tag like:

        <body style="background-image: url('/images/bg.png');">

score 0 · Answer 3 · answered Oct 09 '12 at 14:53

0

You can also save the image in your project folder. And load it in the html page like this:

<img id="mainImg2" src="ms-appdata:///Local//bckgrnd.jpg" />

answered Oct 09 '12 at 14:53

user1731468

570
2
6
23

Windows 8 - Use image for background

3 Answers3