title: Change body background image with css
body: <p>So I am trying to change my background image, the problem is, as it is on my body, it is also changing on my other web page and I do not want it but I want to keep the same background image. Should I give an id/class to my body on my first page (where I want to hover function)? </p>
  
  <pre><code>&lt;!DOCTYPE Html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;MakeHappy, One good thought everyday!&lt;/title&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="randomMessages.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="MakeHappy.css" /&gt;
  &lt;/head&gt;
  &lt;div id="wink" class="imageSwap"&gt;
  &lt;/div&gt;
  &lt;body&gt;
    &lt;header&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;a id="MakeHappy" href="Main.html"&gt;Make Happy&lt;/a&gt;
          &lt;a id="Contact" href="#"&gt;Contact us&lt;/a&gt;
          &lt;a id="Suscribe" href="#"&gt;Suscribe&lt;/a&gt;
          &lt;a id="Project" href="#"&gt;Project&lt;/a&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>\</p>
  
  <pre><code>&lt;!DOCTYPE Html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="randomMessages.js"&gt;&lt;/script&gt;
    &lt;title&gt;MakeHappy, One good thought everyday!&lt;/title&gt;
    &lt;link rel="stylesheet" href="MakeHappy.css" /&gt;
  &lt;/head&gt;
  &lt;body class="Main"&gt;
    &lt;input type="button" onclick="popup()" value="Click to be Happy!"&gt;
    &lt;div  id="demo"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>\</p>
  
  <pre><code>body {
    background-image: url("MakeHappy.jpg");
    background-repeat: no-repeat;
    background-position: 200px 60px;
    background-size: 900px;
    background-color: black;
  }
  body:hover{
    background-image: url("MakeHappy2.jpg");
    background-position: 200px 60px;
  }
  .Main{
    background-size: 100px;
    background-position:top;
  }
  .imageSwap{
    position:absolute;
    color: yellow;
    padding: 150px;
    bottom: 130px;
    right: 500px
  }
  #MakeHappy{
    color: white;
    position: absolute;
    right: 660px;
  }
  #Contact{
    color: white;
    position: absolute;
    right: 660px;
    bottom: 10px;
    transform: rotate(180deg);
  }
  #Suscribe{
    color: white;
    position: absolute;
    left: 320px;
    bottom: 300px;
    transform: rotate(270deg);
  }
  #Project{
    color: white;
    position: absolute;
    right: 360px;
    bottom: 300px;
    transform: rotate(90deg);
  }
  .Main div{
    color: white;
    position: fixed;
  }
  input{
    position: fixed;
    bottom: 150px;
    left: 625px;
  }
  </code></pre>