title: background-image: url("images/plaid.jpg") no-repeat; wont show up
body: <p>I can't seem to make my plaid.jpg the background on any of my pages, let alone all of them, I've tried selecting it by body, html, *, the specific id of "home". nothing works. The image is 300 x 421 pixels. I don't need it to show up pretty, i just want it to show up, behind everything. how would my css look for this? the plaid.jpg picture is in my images folder in the same directory as my index.html file. This link is at the top of my index.html file. and my stylesheet is in my stylesheets folder named mystyles.css.</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css"&gt;
  </code></pre>
  
  <p>I have tried altering my .CSS file every way imaginable in my opinion. the first 30 google results for "background-image not showing up" and none worked. I'm aware it's probably something simple.</p>
  
  <p>mystyles.css in its most basic form with no selector.</p>
  
  <pre><code>  background-image: url("images/plaid.jpg") no-repeat;
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code> &lt;body&gt;
          &lt;!-- Page: home --&gt;
              &lt;div id="home"
                  data-role="page"
                  data-title="Home"&gt;
                  &lt;div data-role="header"
                      data-position="fixed"
                      data-theme="b"&gt;
                      &lt;h1&gt;Home&lt;/h1&gt;
                      &lt;a href="#info"
                          data-icon="info"
                          data-iconpos="notext"
                          data-rel="dialog"
                          class="ui-btn-right"
                          &gt;Info&lt;/a&gt;
                  &lt;/div&gt;&lt;!-- header --&gt;
                  &lt;div data-role="content"&gt;
  
                  &lt;div data-role="controlgroup" data-theme="e"&gt;
                      &lt;a href="#blog" 
                          data-role="button"
                          data-icon="arrow-r"
                           data-theme="e"
                      &gt;Blog&lt;/a&gt;
                      &lt;a href="#videos" 
                          data-role="button"
                          data-icon="arrow-r"
                           data-theme="e"
                      &gt;Videos&lt;/a&gt;
                      &lt;a href="#photos" 
                          data-role="button"
                          data-icon="arrow-r"
                           data-theme="e"
                      &gt;Photos&lt;/a&gt;
                      &lt;a href="#tweets" 
                          data-role="button"
                          data-icon="arrow-r"
                           data-theme="e"
                      &gt;Tweets&lt;/a&gt;
                  &lt;/div&gt;&lt;!-- links --&gt;
                  &lt;/div&gt; &lt;!-- content --&gt;
              &lt;/div&gt;&lt;!-- page --&gt;
  </code></pre>
  
  <p>this wasn't succesful</p>
  
  <pre><code>body {
      background-image: url("/images/plaid.jpg");
      background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>this is whats in my  also</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Mob App&lt;/title&gt;
      &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /&gt;
  
      &lt;link rel="shortcut icon" href="images/favicon.ico" /&gt; 
  
      &lt;!--&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;--&gt;
      &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="javascripts/myscript.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css" /&gt;
      &lt;/head&gt;
  </code></pre>