Multiple Background Images in HTML

In this article I’m going to demonstrate how we can use multiple background images for any html element.

Those who have knowledge of HTML5 and CSS3 can do it easily using the already provided functionality. But all browser’s doesn’t support HTML5 and CSS3, so for these browser to work we need to do little customization.

First I’ll demonstrates how to

• Use multiple background images in HTML5 and CSS3
• Use multiple background images in lower versions of browser.

 

Multiple background images in HTML5 and CSS3

With CSS3 we case easily define multiple backgrond images in a single line like this

background:url('../images/bg2.jpg') fixed left top no-repeat, url('../images/bg2.jpg') fixed right top no-repeat,url('../images/bg_strip.jpg') fixed center top repeat-x; 

Workaround for unsupported browsers

Some browser doesn’t support multiple background images (example IE 8 and below versions, Firefox 13 and below versions), so as a workaround I’ve implemented a JavaScript to apply images.

 // Script for Detecting Browser

<script src="JScript/BrowserDetect.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        if (!VaildBrowser()) {
            var $this = $('#outer_border');
            //Creating Left and Right Wraper for Applying the Background Images
            $this.wrap('<div class="background_outer_left" />');
            $this.wrap('<div class="background_outer_right" />');
            document.getElementById('outer_border').style.height = $(document).height() + 'px';
        }
        else {
            document.getElementById('outer_border').style.height = $(document).height()+ 'px';
        }
    });

//Detects that Current Browser Version
    function VaildBrowser() {
        var browser = BrowserDetect.browser;
        var version = BrowserDetect.version;
        if (browser == 'Explorer' && version < 9)
            return false;
        else if (browser == 'firefox' && version < 14)
            return false;

        return true;
    }
</script>

In the CSS class ‘background_outer_left’ and ‘background_outer_right’ we have defined the background to apply on the HTML element, and with the help of JavaScript, we have created a wrapper element to apply those background styles.

Hope this information will help people facing this kind of issue.