Skip navigation
Daisyoops
Currently Being Moderated

Double background image renders in all browser except IE - Time Senitive Issue

May 8, 2013 10:13 AM

Tags: #background #image #layout #html5

Looking for some help.  I have to hurry to put a HTML5 website up, unfortunately I have to make it look like one that was created using a sitebuilder template package.  The original site is http://www.ourvietnamvets.com

 

I am using Dreamweaver CS5.5, and validated my code structure with WC3 and received no errors or warnings.

 

IE only renders the background color and not the double background image.

 

CSS CODING

 

 

@charset "utf-8";

body {

    margin: 0;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 20px;

    background-color: #060b60;

    height: 400px;

    width: 992px;

    background-image: url(../Images/bg_bp88.jpg), url(../Images/bg_jl6x.jpg);

    background-position: center top, left top;

    background-repeat: no-repeat, repeat-x;

    margin-left:auto;

    margin-right:auto;

    position:!important;

}

 

HTML5 CODING

 

 

!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<!-- TemplateBeginEditable name="doctitle" -->

<title>Untitled Document</title>

<!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="head" -->

<!-- TemplateEndEditable -->

<link href="css/twoColFixHdr.css" rel="stylesheet" type="text/css">

 

 

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">

</head>

 

<body>

<div class="special">Our Vietnam Vets</div>

<div class="container">

 

 

 

  <div class="sidebar1">

 

 

Is there an IE hack or something I should be using?  I desparately need help on this.  I have to have the entire site up before the end of the week.  The old site is referencing an old event from last year and this new site has to be up as an email blast and lots of marketing for this fundraiser is do to go out Monday morning.

 

Thanks in advance to anyone who can offer any help.

 

Daisy

 
Replies
  • Currently Being Moderated
    May 8, 2013 10:20 AM   in reply to Daisyoops

    IE doesn't support all CSS level 3 properties. 

     

    The workaround is to put one background-image in the html selector and the other in your body selector like this:

     

    html {

        background: url(../Images/bg_bp88.jpg) no-repeat center top;

    }

     

    body {

         background: url(../Images/bg_jl6x.jpg) repeat-x left top;

    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 12:06 PM   in reply to Daisyoops

    Which version of IE are you testing with?

     

    Can I see a link to your page?  It's always easier to trouble shoot when we can actually see everything in our browsers.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 12:55 PM   in reply to Daisyoops

    Can you see 2 background images in this example? 

    http://alt-web.com/sandbox/Logo-with-headings.html

     

    A green pattern should fill the page.  A purple & white pattern is repeated downward.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 1:06 PM   in reply to Nancy O.

    I didn't see any purple & white pattern and I checked on FF, Chrome and Safari on a Mac. All browsers upto date.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 1:19 PM   in reply to VL Branko

    Oooops.  My bad.  Forgot to upload it.  Try it again -- in IE10 if you have it.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 9, 2013 2:41 PM   in reply to Daisyoops

    Daisy, There's hope for everyone .

     

    The good news is it works in IE9, FF20, Chrome, Safari and other CSS level 3 supporting devices.

     

    The bad news is that multiple-background images on the same selector  do not display in pre-IE9 because they are not web standards compliant browsers.  Never were, never will be.

     

    The workaround would be to feed the lesser browsers an IE conditional comment with a single background image. 

     

    Or break things up some more by applying single background-images to the html, body and .header selectors.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points