How to Use Bing Images as Backgrounds on Your Website

A simple method to automatically display Bing's daily background image using RSS and ASP

Posted by Hüseyin Sekmenoğlu on November 10, 2013 Frontend Development

Have you ever visited the Bing homepage and admired the stunning background image? Now imagine having that exact image appear on your own website automatically updated every day without needing an agreement with Microsoft or scraping any code. That is exactly what we will walk through in this guide.

We will use the Bing image archive provided by istartedsomething.com/bingimages and its RSS feed:
http://feeds.feedburner.com/bingimages

With a bit of ASP code, we can fetch and display these images dynamically.

🛠 Step 1: Define the Variables

Start by creating the necessary XML HTTP and DOM objects in classic ASP:

<%
Set xml = Server.CreateObject("msxml2.ServerXMLHTTP")
Set doc = Server.CreateObject("msxml2.DOMDocument")
%>

🌐 Step 2: Open the RSS Feed

We retrieve the feed using a GET request and load it into the XML document:

<%
xml.open "GET", "http://feeds.feedburner.com/bingimages", false
xml.send
doc.loadXML(xml.ResponseText)
%>

🔍 Step 3: Locate the Image Entry

We loop through the feed items to find the one titled for the United States, as it usually has the full-resolution version:

<%
Set items = doc.getElementsByTagName("item")
For i = 0 To 10
    Set curitem = items.item(i)
    For Each objChild In curitem.childNodes
        If LCase(objChild.nodeName) = "title" Then
            If InStr(objChild.text, "United States") > 0 Then
                x = True
                Exit For
            End If
        End If
    Next
    If x = True Then
        text = objChild.text
        text = Left(text, InStr(text, "(") - 2)
        Set enode = curitem.SelectSingleNode("enclosure")
        Set node = enode.SelectSingleNode("@url")
        enclosure = node.Text & ""
        Exit For
    End If
Next
%>

🎨 Step 4: Display the Background Image

Now we apply the image URL as a fullscreen background using CSS:

<style>
html {
    background: url('<%=enclosure%>') no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</style>

✅ Final Result

Every time your site is loaded, it will fetch the latest Bing background image from the RSS feed and display it in fullscreen. This gives your site a fresh, elegant look with no manual effort.