title: Trouble setting an image to the bottom right corner in the background using css
body: <p>I am trying to place an image in the centre of the screen (a cell phone) and I also have a large logo image that I want to be anchored to the bottom right of the page. I am very new to CSS and HTML. So far I have this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
     &lt;title&gt;My Site&lt;/title&gt;
     &lt;link href="style.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
      &lt;div id="content"&gt;
      &lt;p class="centeredImage"&gt;&lt;img src="image1.png"&gt;&lt;/p&gt;
  
  
      &lt;/div&gt;      
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and this in the CSS:</p>
  
  <pre><code>#content {
    width: 99%;
    height:100%;
    margin: auto;
    background-color: white;
     background-image: url('logo.png');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: right;
  }
  
  .centeredImage
      {
      text-align:center;
      display:block;
      }
  </code></pre>
  
  <p>However I achieve this:</p>
  
  <p><img src="https://i.stack.imgur.com/BjsGm.png" alt="enter image description here"></p>
  
  <p>The phone is centred fine however if I resize the window the logo wont stick to the bottom right of the screen. I have played around with using a footer a little bit but when I do this the logo image is below the cell phone image. I just want it to be in the background bottom right no matter how big the window is with the cell phone image centred. Could someone give me some pointers on how to do this please? Thanks!</p>
  
  <p>EDIT so I have wrapped the logo image in a separate div:</p>
  
  <pre><code> .logo {
      position: fixed;
      bottom: 0;
      right: 0;
    }
  </code></pre>
  
  <p>however this now overlaps the centered image slightly ie is not in the background</p>