background_image.html | Explore in Territory

<!doctype html>
<html>
  <head>
    <style>
      html,
      body,
      #image,
      #gradient {
        height: 100%;
        width: 100%;
      }

      #image,
      #gradient {
        position: fixed;
        top: 0;
      }

      body {
        margin: 0;
        opacity: 0;
        transition: opacity 700ms;
      }

      body[shown] {
        opacity: 1;
      }

      #image {
        background-image: $i18n{backgroundUrl};
        background-position: $i18n{positionX} $i18n{positionY};
        background-repeat: $i18n{repeatX} $i18n{repeatY};
        background-size: $i18n{size};
      }

      #gradient {
        background: radial-gradient(transparent 50%, black),
            linear-gradient(transparent, black);
        display: $i18n{scrimDisplay};
        opacity: .2;
      }
    </style>
  </head>
  <body>
    <script src="background_image.js"></script>
    <!-- The img tag purely exists to capture the load event. -->
    <img src="$i18n{url}" onload="onImageLoad()" hidden></img>
    <div id="image"></div>
    <div id="gradient"></div>
  </body>
</html>

chromium/chrome/browser/resources/new_tab_page/untrusted/background_image.html