title: Background Images - Making a full width image within a container
body: <p>I need to put HTML content within a page template. The section I have been given is within a Div container defining the size I have to work with. The CSS for the template defines margins of 17.5% left and right meaning I have 65% in the centre to input my content. This is ok for a majority of the content I need to include except the background image that needs to be full width (100%). I can attach a style sheet with my content however if I change the .wrapper element in my css it causes issues with the rest of the page. I also have to change the background image on a page by page basis so have to include the image path in the HTML and not in the CSS.</p>
  
  <p>What I have so far is </p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="pageBackground"&gt;
          &lt;img src="img/festival-background.jpg"&gt;
      &lt;/div&gt;  
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.pageBackground {
  position: relative;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.pageBackground img {
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size:cover;
  </code></pre>
  
  <p>}</p>
  
  <p>What would be a correct way to make my background image 100% of the page rather then container and behind the rest of my content?</p>
  
  <p>Many thanks in advance!!! </p>