| <!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> |
