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 6 of 6
  1. #1
    Junior Member jennilynn6's Avatar
    Join Date
    Feb 2013
    Posts
    25
    Member #
    35169
    Hello all! Hope I've come to the right place to get some help on this...

    I have a client who has their site set up in Wordpress (I didn't do the original site, am just updating it) and I need to have layered backgrounds. The main page of the site has a tiled bg so theres no white space on the sides but then has a graphic of a mind-map that describes his business, which is laid on top of the tiled bg and centered on the page. All other pages on the site are set up the same way, with a different tiled bg and another background on top of it. It works just fine in new versions of FF, Chrome, Opera and Safari... IE is the issue (isn't it always?!). Seems to be okay in IE9 but the client is worried about people with older versions. I've read some articles on the issue but haven't found a clear explanation of how I can fix this. heres an example of the CSS I'm using:

    #folio1 {
    background: url(http://www.alomay.com/wp-content/the...ges/coffee.png), url(http://www.alomay.com/wp-content/the...olio3-bg.jpg);
    background-repeat: no-repeat, repeat;
    background-position: bottom;
    }

    The site is alomay.com. Any help is grately appreciated! I'm a graphic designer mostly and took on this job to just update the graphics on the page but has turned into much more coding than anticipated. Hoping theres some super smart developers and coders out there who will make this fix easy. Thank you!!

    Jenni

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    There are a few options out there.
    1. Look at the analytics for the site and see if you even have an appreciable number of visitors using IE8, and if not, convince the client not to sweat it. Among over 1K visitors to my site in the last month, 14 were on IE8. That's about 1.2% of the total. This is the best option, IMHO.

    2. Using conditional comments, you could insert a div with the second background and position it. You could even use your existing declaration to make it work:
    Code:
    #folio1 {
    background: url(http://path-to-single-background-image);
    background: url(http://www.alomay.com/wp-content/themes/acs/images/coffee.png), url(http://www.alomay.com/wp-content/themes/acs/images/folio3-bg.jpg);
    background-repeat: no-repeat, repeat;
    background-position: bottom;
    }
    Compliant browsers will give priority to the multiple background declaration, and non-compliant browsers will ignore it and just use the single image. And then add styles to the conditionally placed div to add the second bg image. If #1 fails, this is the most reliable and compatible option.

    3. CSS3PIE

    4. If IE8 is the only one you're worried about, the :after pseudo element might work for you. Set the bg on #folio1 like above, and then in an IE stylesheet, set:
    Code:
    #folio1:after{
      content:"";
      background:url("http://path-to-second-bg-image");
      position:absolute; /*or fixed or whatever*/
      top:##px; /*or percent or whatever*/
      left:##px; /*or percent or whatever*/
      height:##px;
      width:##px;
    }
    This one won't work in IE7 and below tho.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member jennilynn6's Avatar
    Join Date
    Feb 2013
    Posts
    25
    Member #
    35169
    I think the first idea you posted would be best for me but I don't think I can create whats there as a single image (please correct me if I'm wrong on this, maybe I need more coffee this morning!); The client wants the background to tile so theres no white on the sides and then the illustrated 'map' I created has to sit exactly where it is now to line up with the circular navigation in the middle of the page. Suggestions?

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I think you've misunderstood what I was proposing. You have 2 images now. One is a tiled bg, the other an image that sits in the middle of the page.

    Set the tiled image first by itself, then as part of a multiple bg declaration. Then, use IE conditional comments to add a div that is positioned in the middle of the page. Set the bg of that div to the image you want behind the menu, absolutely position it where you want it and size it appropriately. Compliant browsers will use the multiple bg's, and IE8 and below will use the tiled bg plus the div.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member jennilynn6's Avatar
    Join Date
    Feb 2013
    Posts
    25
    Member #
    35169
    do I have to create a separate stylesheet for the IE rules or can I just include them in the regular CSS page that I have now? I've never created IE-specific CSS, sorry if thats a silly question.

    I really appreciate the help so far!

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    No problem.

    2 ways you can go about it:

    1. Wrap the div in a conditional comment and yes, you can just add the CSS right in with the rest of it.
    2. Create a separate stylesheet and wrap the <link> tag in a conditional comment, put in the div without the conditional comment and just set the div to display:none in your regular CSS.

    I recommend option 1.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


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 11:11 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com