SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    The most simple question with no answer (to me at least)?

    This has me stumped. I simply want to use rgba and a background image with fall back for IE8. Without having to say the image twice. Easy right.

    With image twice it works everywhere
    #top b {
    background:rgb(255, 255, 255) url(../img/top.png) 11px 14px no-repeat;
    background:rgba(255, 255, 255, .6) url(../img/top.png) 11px 14px no-repeat;
    }

    With image once it works nowhere
    #top b {
    background-color:rgb(255, 255, 255);
    background-color:rgba(255, 255, 255, .6);
    background-image:url(../img/top.png) 11px 14px no-repeat;
    }

    When I say "works nowhere" I mean the background color shows but no image. "b" is AP'd with dimensions. What am I missing?

    Thanks,
    Eric W

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    There is nothing on the web about this which leads me to believe its user error. I have actually never said both color and image. I just always short hand it. Maybe I don't know how that works in combo. Or maybe it works dif with rgba. Or maybe I have something else getting in the way here. Just let me know where I went off the road?

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    PS webkit is dropping the ball when it comes to generated content. I thought they were the leading standard pushers? Again webkit kept me from using :before and :after because it doesn't do transitions on :before and :after. That's ridiculous especially since its been a documented bug now for 3 years. If you can't fix something in 3 years time its time to hang it up.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    If you need some context its the BackToTop Link in the bottom right. Scroll down a sec to see. http://www.websitecodetutorials.com/

    And here is a striped down test page http://www.websitecodetutorials.com/...ts/testtop.php

    SCROLL DOWN TO SEE.

  5. #5
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    That's because background-image doesn't work that way....this works

    #top b {
    background-color:rgb(255, 255, 255);
    background-color:rgba(255, 255, 255, .6);
    background-image:url(../img/top.png);
    background-position: 11px 14px;
    background-repeat: no-repeat;

    }
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ahh it was user error as I thought then. So you can't just say image. That's was threw me off. Because when saying it short hand if you just say image with no position or repeat it still shows the image - correct position or not its still there.

    Thanks Dave!

  7. #7
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Ahh it was user error as I thought then. So you can't just say image. That's was threw me off. Because when saying it short hand if you just say image with no position or repeat it still shows the image - correct position or not its still there.

    Thanks Dave!
    No worries - I've done it enough time to catch it....

    It's different because the shorthand is background, not background-image. background-image is a subset of background. Kind of like border-left is a subset of border.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That's funny. Reminds me of cursive. I've printed for so long I forgot how to write cursive. Just like longhand background-image.

    Thanks!

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    it strikes me that you could write the shorthand property and then the background color with rgba().. but I am curious how does this work as a fallback? wouldn't the fallback image show up on all browsers even those who support rgba()?

    BTW:
    you can define opacity for IE this way:
    //// for IE5-7
    filter: alpha(opacity=50);
    // for IE8
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=50);

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I just recently read (and forgot) that one of the browsers (either IE or the others) abort the rule once they hit something they don't understand. I believe that was IE. So if true IE should not read the image as soon as it sees rgba.

    Edit: ya I have written off IE6 and 7. Now IE8 looks like IE6 would in the past for me with this design. I have some fixing to do. And I don't care to give IE8 pretty things. Just a blocky fully working site is all it gets.

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    it strikes me that you could write the shorthand property and then the background color with rgba().. but I am curious how does this work as a fallback? wouldn't the fallback image show up on all browsers even those who support rgba()?

    BTW:
    you can define opacity for IE this way:
    //// for IE5-7
    filter: alpha(opacity=50);
    // for IE8
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
    Just tested...

    background:rgb(255, 255, 255);
    background:rgba(255, 255, 255, .6) url(../img/top.png) 11px 14px no-repeat;

    and

    background-color:rgb(255, 255, 255);
    background:rgba(255, 255, 255, .6) url(../img/top.png) 11px 14px no-repeat;

    Only color in IE - no image. So it seems I was correct. IE aborts the whole line once it hits something it cant understand. No cascade action.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Just tested...

    background:rgb(255, 255, 255);
    background:rgba(255, 255, 255, .6) url(../img/top.png) 11px 14px no-repeat;

    and

    background-color:rgb(255, 255, 255);
    background:rgba(255, 255, 255, .6) url(../img/top.png) 11px 14px no-repeat;

    Only color in IE - no image. So it seems I was correct. IE aborts the whole line once it hits something it cant understand. No cascade action.
    That's because you are only including the rest of the options in the version IE doesn't understand. If you swap it around this way then the only part IE doesn't understand is in a separate statement.

    Code:
    background:rgb(255, 255, 255) url(../img/top.png) 11px 14px no-repeat;
    background-color:rgba(255, 255, 255, .6);
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Yup, Stephen code is exactly what I was trying to say.


    But my question was more about COMPLIANT browsers, shouldn't:
    #top b {
    background-color:rgb(255, 255, 255);
    background-color:rgba(255, 255, 255, .6);
    background-image:url(../img/top.png);
    background-position: 11px 14px;
    background-repeat: no-repeat;
    }
    show BOTH the image and the semi-transparent color in browsers such as FF and Safari? I dont think that what you would want , but maybe am wrong.

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    That's because you are only including the rest of the options in the version IE doesn't understand. If you swap it around this way then the only part IE doesn't understand is in a separate statement.

    Code:
    background:rgb(255, 255, 255) url(../img/top.png) 11px 14px no-repeat;
    background-color:rgba(255, 255, 255, .6);
    Ahh yes good one felgall thank you. That should work. I'll try that out in a bit.

  15. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Ahh yes good one felgall thank you. That should work. I'll try that out in a bit.
    As expected that worked perfect. I'm jealous. I should if thought of that.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •