Cross Browser Compliance - Bing Wallpaper Web Scraping

https://stackoverflow.com/questions/23594840

20-07-2023
|

문제

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.

해결책

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

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow