title: Background image in Joomla
body: <p>I am trying to create a webpage like <a href="http://davidpattinson.co/education/tutorials/29-how-to-add-a-full-screen-background-image-to-joomla-2-5" rel="nofollow">this</a> (just the screenshot part). I tried to follow that tutorial, plus other on the internet but they don't seem to work. This is my css code:</p>
  
  <pre><code>  /* CloudBase 2.0 overrides for Gantry Framework */
  
  /* Basic styles */
  body {color: #333;}
  
   background:url(../images/St%20Pauls.jpg);
  
  
  
  #rt-header, #rt-bottom {color: #333333;}
  .rt-container {background: #fff;} 
  .rt-article a{text-decoration: underline;}
  a:hover {color: #000; text-decoration: none;}
  #rt-footer, #rt-copyright, #rt-copyright a {color: #333333;}
  #rt-sidebar-a {background-color: transparent;}
  #rt-sidebar-b {background-color: transparent;}
  #rt-sidebar-c {background-color: transparent;}
  #gantry-viewswitcher {margin: 0 auto 1em;position: relative;}
  #rt-accessibility .button{
    padding: 0px;
  
  
  }
  #rt-accessibility .button, .rt-joomla .icon {
    background-image: url(../images/typography.png);
  }
  
  /* Layers structure */
  #page-wraper{
    width: 998px;
    padding: 0px 37px;
    margin: 20px auto 0px auto;
    background: url(../images/background/shadow.png) 50% 0px no-repeat;
  }
  #in-page-wraper{  
    background: url(../images/background/bottom-shadow.png) center bottom no-repeat;
    padding-bottom: 51px;
  }
  #in-page-wraper-2{
    background: url(../images/background/content-background.png);
    border: 1px solid #fff;
    padding-top: 25px;
    padding-bottom: 25px;
    min-height: 500px;
  }
  .rt-container{
    background: none;
  }
  #rt-mainbody{
    background: #fff;
  
    margin: 0px;
    -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
    -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
    box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
    padding: 6px;
    overflow: hidden;
  }
  #rt-mainbody .component-content{
    border: 1px solid #dcdcdc;
    padding: 15px;
    overflow: hidden;
  }
  </code></pre>
  
  <p>The </p>
  
  <pre><code>background:url(../images/St%20Pauls.jpg);
  </code></pre>
  
  <p>part doesn't seem to work for some reason. Apologies if this is a basic question.</p>
  
  <p>Thanks!!</p>