title: every page it's own id in CSS file
body: <p>I am working on a website and finished the frontpage which is index.html and customized its css into one file to be used as a template by all pages coming.</p>
  <p>Now I have a problem.</p>
  <p>How do I get all pages to display their own background images?</p>
  <p>option1   let the background.img be added to the html of its own page .. (1.img in 1.html instead of
  inside the CSS file)</p>
  <p>option2   give every page its own id (somehow) inside the css file.</p>
  <p>option3  another solution.</p>
  <pre class="lang-css prettyprint-override"><code>body{
      margin:0;
      padding:0;
      background-image: url(index.jpg);
      background-size: cover;
      background-attachment: fixed;
  
  
  }
  .topParagraph{
                  
      font-size: 60px;
      font-weight: bold;
      text-align: center;
  }
  .topbar{
  
      text-align: right;
      
  }
  
  .content{
      background:whitesmoke;
      
      width: 50%;
      padding:10%;
      margin:200px auto;
      font-family: sans-serif;
      opacity: 0,5;
  }
  {
  
      padding: 0;
      margin: 0;
  }
  body
  {
  
      background-image: url(deKlomp.jpg);
      background-size: cover;
      background-attachment: fixed;
      box-sizing: border-box;
      font-family: sans-serif;
  
  }
  .menu-bar
  {
  
      background: #0b2463;
      text-align: center;
  }
  .menu-bar ul
  {
      display: inline-flex;
      list-style: none;
      color:#fff
      
  }
  .menu-bar ul li
  {
      widows: 120px;
      margin: 15px;
      padding: 12px;
  
  
  }
  .menu-bar ul li a
  {
      text-decoration: none;
      color:#fff;
  
  }
  .active, .menu-bar ul li:hover
  {
      background: #66c2ff;
      border-radius:3px;
  
  }
  .menu-bar .fa
  {
      margin-right: 8px;
  }
  .sub-menu-1
  {
      display:none;
  }
  .menu-bar ul li:hover .sub-menu-1
  {
      display: block;
      position: absolute;
      background:  #66c2ff;
      margin-top: 15px;
      margin-left: -15px;
  
  }
  .menu-bar ul li:hover .sub-menu-1 ul
  {
      display: block;
      margin: 10px;
  
  }
  .menu-bar ul li:hover .sub-menu-1 ul li
  {
      width: 150px;
      padding: 10px;
      border-bottom: 1px dotted #fff;
      background: transparent;
      border-radius: 0px;
      text-align: left;
  
  
  }
  .menu-bar ul li:hover .sub-menu-1 ul li:last-child
  {
      border-bottom: none;
  
  }
  .menu-bar ul li:hover .sub-menu-1 ul li a:hover
  {
      color:  #66c2ff;
  }
  </code></pre>