Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Apr 2010
    Posts
    4
    Member #
    21761
    I'm stuck on this issue. I have two background that I want, one layered on top of the other. I have used the multiple backgrounds syntax that's native to CSS3, but it only works in Chrome, not IE or Firefox

    I have tried using separate background images in separate elements. That works in IE, but not Chrome or Firefox.

    I'm completely stuck. I don't understand why I'm getting wildly different results. Most importantly, i can't figure out why my background div doesn't display in Chrome, but it does in IE.

    Please help!

    I've tried to use an IE hack (below). I get these results:
    Chrome: 2 backgrounds
    IE 7: Background 2
    Firefox: Background 1

    Simplified HTML:

    <body>
    <div id="background">
    whole bunch of divs and content
    </div>
    </body>


    CSS:
    HTML>body {
    background-image: url(background2.png), url(background1.png);
    background-repeat: no-repeat, repeat-x;
    background-attachment:fixed;
    }

    body{
    background-image: url(background1.png);
    background-repeat: repeat-x;
    background-attachment:fixed;
    }

    #background{
    background-image: url(background2.png);
    background-repeat: no-repeat;
    background-attachment:fixed;
    height: 100%;
    width: 100%;
    overflow:visible;
    }

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Can you show us an actual page example?

    At a glance, it seems like this should be using the multi-element solution for all browsers (since html > body is before the others). To boot, I'm fairly certain that IE7 no longer ignores html > body, so it's likely not to be a valid hack. For targeting IE specifically, I recommend using conditional comments and a separate stylesheet. It's much cleaner and more effective.

    Multiple backgrounds, by the way, should be working correctly in Firefox, if you're using the latest version.

  4. #3
    Junior Member
    Join Date
    Jun 2009
    Location
    India
    Posts
    4
    Member #
    19305
    Multiple background is supported by all major browsers except IE.
    It should work if you are using as background separate in div / html tags.
    Attach the ref URL to get accurate solution for your problem.

  5. #4
    Junior Member
    Join Date
    Apr 2010
    Posts
    4
    Member #
    21761
    here's the URL:

    www.madebypaceaux.com

    it's the homepage. I'm completely stuck on this. I started coding the site by hand, and then at some point I drifted into dreamweaver, but Dreamweaver seems to see two backgrounds.

    Kind of embarrassing that it's my design website, but I've spent more time on other people's sites than my own.

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    I got it to work with this:
    Code:
    <body>
    <div id="background">
    <!-- Content -->
    </div>
    </body>
    
    
    <style>
    body {
        background: #000 url('background1.png') repeat-x top left;
    }
    #background {
        height: 100%;
        width: 100%;
        overflow:visible;
        background: transparent url('background2.png') no-repeat center top;
    }
    </style>

  7. #6
    Junior Member
    Join Date
    Apr 2010
    Posts
    4
    Member #
    21761
    Thank you guys.

    @smosely,

    Your suggestion worked in IE7, FF, and Chrome, except for one small thing:

    I had to set height as a static value - like px or ems. when my height was set as 100%, none of the browsers would take it.

  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    You can do that. Or you can do this to have fluid height on the wrapping div:

    Code:
    height: 1000px;  /* IE6 "min" height (fixed-height for modern browsers) */
    height: auto!important;   /* Override fixed height for modern browsers (ignored by IE6) */
    min-height: 1000px;  /* min-height  for modern browsers */
    You can also do this, to ensure your wrapper extends to the length of your contents (no need to specify height for your wrapper in this example):
    HTML Code:
    <body>
    <div id="background">
        <!-- Content -->
        <div style="clear: both"> </div>
    </div>
    </body>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:14 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com