title: jquery, set image as foreground image - watermark effect across all page content
body: <p>I am trying to use jQuery to set a new class on the content id that wraps around my page content to create a watermark effect using a transparent image. 
  This is to run alongside a drop down box that can be removed that will inform the user the site is archived. The drop down box works and can be removed when clicked on.</p>
  
  <p>I am having an issue adding a background image or, img src, to the container. I am working on the basis that this will require setting a new .attr for the .archived class
  that is being created. Once created I will need to use z-indexing to bring the image to the front of the content and then pointer-events to allow the user to click through the 
  image and use the page, whilst the archived msg appears. This is not to be used for any other reason than to inform the user so will not matter if they turn off java and do not 
  see it. As such a jquery answer rather than server side is preferable.</p>
  
  <p>I have tried using as many of the solutions on stackoverflow as I could find, and I appreciate this has been discussed in other questions but I have been unable to correctly 
  use those answers and get it to work, so thought I would ask.</p>
  
  <p>This is what I am currently working with:</p>
  
  <pre><code>$(document).ready(function () {
    archivedWatermark();
    archivedNotification();
  });
  
  function archivedWatermark() {
    $('#container').addClass('archived');
    $('#container').css({
      'background': 
          'url(../assets/images/New-to-Teaching/EnhancingHolisticAspects-Icon-
          Thought-Bubbles.png)',
       'position': 'relative',
       'z-index': '99999',
       'pointer-events': 'all'
  });
  }
  
  function archivedNotification() {
    archivedMsgRemove();
    archivedMoreInfo();
  }
  
  function archivedMsgRemove() {
  
  $('#archived-msg').click(function () {
      $('#archived-site').remove();
      alert('msg removed');
  });
  }
  
  function archivedMoreInfo(){
  
  var moreInfo = $('#archived-info');
  
  $('#archived-more').click(function(e){
  
      if (moreInfo.is(':hidden')){
          moreInfo.slideDown('fast');
      } else {
          moreInfo.slideUp('fast');   
  }
  e.preventDefault();
  });
  }
  </code></pre>
  
  <p>And the css used:</p>
  
  <pre><code>/*Archived site*/
  
  /* Defined in jquery
  .archived {
    content: url(...url-location);
    position: relative;
    z-index: 99999;
    pointer-events: all;
  }*/
  
  #archived-site {
    float: left;
    width: 100%;
  }
  #archived-site .inner {
    padding: 2em 2em 2em 164px;
    overflow: auto;
    background: #EEE url(url.png) no-repeat 18px 50%;
  }
  #archived-site h2 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    color: #D90000;
  }
  #archived-site p {
    margin-bottom: 1em;
    line-height: 1.4em;
  }
  #archived-site p a {
    color: #D90000;
    font-weight: bold;
  }
  #archived-site li {
    float: left;
    list-style: none;
  }
  #archived-site li a {
    float: left;
    padding: 0.5em 0.5em;
    background: #D90000;
    color: #fff;
    text-decoration: none;
    margin-right: 0.5em;
  }
  #archived-site li a:hover {
    background: #000;
  }
  #archived-info {
    background:#D90000;
    position:inherit;
    display:none;
  }
  </code></pre>
  
  <p>And the html used:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="archived-site"&gt;
      &lt;div class="inner"&gt;
           &lt;h2&gt;This site has been archived&lt;/h2&gt; 
          &lt;p&gt;This is an archived site. To view the latest HEA material 
  relating to your  subject please visit the HEA disciplines page &lt;a href="#"&gt;here
  &lt;/a&gt;and select your chosen discipline&lt;/p&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" id="archived-msg"&gt;Remove&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="archived-more"&gt;More Info&lt;/a&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="archived-info"&gt;
           &lt;h3&gt;Further Information&lt;/h3&gt; 
          &lt;p&gt;For further information read this!&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any suggestions, pointers or solutions on how to get this to work would be appreciated. Feel free to ask any questions if I have omitted anything and I will try 
  to answer ASAP.</p>
  
  <p><strong>Edit as requested</strong>
  JSFiddle, hopefully this should give some indication of what I have so far. Thanks again.</p>
  
  <p><a href="http://jsfiddle.net/PartTimeNinja/2c9Xp/9/" rel="nofollow noreferrer"><strong>Here is the updated fiddle</strong></a></p>
  
  <p>Thanks to BenMann for the syntax solution. </p>
  
  <p>Even with the syntax solution, the jquery only replaces the background image. What i would like is the background image to now come to the foreground, keeping the original background image and covering all the content on the page. </p>
  
  <p><img src="https://i.stack.imgur.com/f0zpF.png" alt="archiveSite-sample"></p>
  
  <p>Thanks again to anyone that has a look.</p>