Cross Browser Compliance - Bing Wallpaper Web Scraping

StackOverflow https://stackoverflow.com/questions/23594840

Pregunta

I am trying to display the Bing Homepage here.
It is a web scraper that finds the image URL and sets it as the background image.
But as usual there are always issues with Internet Explorer. But i expected IE11 to handle it well. Yet, it didnt. My objective is that on zooming in and out, the background image shouldnt get resized.
Everything works fine on Google Chrome and Mozilla Firefox.
I would like to try to make it look the same on all browsers. what should/can i do?

Here's my code:

echo '<!DOCTYPE html>';
echo '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>';
echo '<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />';
echo "<title>Bing Wallpaper Scraper</title>";
$style="body {
background-image: url('$v');
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: top center !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}";
echo "<style>$style</style>";
echo "</head>";
echo "<body>";//background='$v'
echo "<div style='text-align:center;'>";
echo "<h1 style='color:white'> I did it! </h1>";
echo "<h2 style='color:white'> You too can! </h2>";
echo "</div>";
echo "</body></html>";

The variable $v has the image URL from the web scraper. Just as it is available in this xml document or this json output.

¿Fue útil?

Solución

Remove the background-attachment property and you will get what you are looking for.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top