title: how to have different background images in two different pages in angular2?
body: <p>I have a angular 2 application on which i have to use seperate background images on home page and other pages, i have applied image on index.html  to have a background image but i need to add different image on different pages.
  This is my code</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  
    &lt;script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="resources/js/semantic.min.js"&gt;&lt;/script&gt;
  &lt;script src="resources/js/slideshow.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" class="ui" href="resources/css/semantic.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" class="ui" href="resources/css/angularSwitch.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" class="ui" href="resources/css/main.css" /&gt;
    &lt;link href="resources/css/datepicker3.css" rel="stylesheet" type="text/css"&gt;
    &lt;link href="resources/css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="resources/css/styles.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="resources/js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="resources/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="resources/js/chart.min.js"&gt;&lt;/script&gt;
    &lt;script src="resources/js/chart-data.js"&gt;&lt;/script&gt;
    &lt;script src="resources/js/easypiechart.js"&gt;&lt;/script&gt;
    &lt;script src="resources/js/easypiechart-data.js"&gt;&lt;/script&gt;
    &lt;script src="resources/js/bootstrap-datepicker.js"&gt;&lt;/script&gt;
    &lt;script&gt;
  &lt;!--Icons--&gt;
  &lt;script src="resources/js/lumino.glyphs.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="background-image: url("resources/static/pic/slide_1.jpg");" &gt;
  
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please suggest me how to achieve this.</p>