SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2009
    Posts
    471
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image vs styled color

    I am using a graphic with a red background for a banner that is the width of the page. I want to extend the red banner out the width of the viewport using a styled color which works fine and on my Windows computer using any browser, the colors are virtually identical. But when using a high end Mac, the red image is a noticeably different red than the graphic and displays a visible break line.

    Is this to be expected, i.e. is it foolhardy to try to exact match a styled color with a graphic color across different platform/browser combinations? And if it is, should I use a 1 pixel wide image the same height as the banner and horizontally extend that out so they render the same color?

    Thanks

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,800
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    By styled color, do you mean a gradient or is it a solid color?


    IF it is a solid color, do you have Photoshop? The reason why I ask, is because In PS you can do a 1x1 sampling (This in important! Photoshop and other paint programs have setting that sample the AVERAGE color in a particular AREA, but what you want is the EXACT COLOR or a particular PIXEL)...
    Once you know that, then you can look at the hex code that PS gives you... #xxxxxx and use that instead of RGB..

    try that before resorting to the graphic trick...

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2009
    Posts
    471
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By styled color, I was talking about creating a box and filling it with #xxxxxx in CSS. I sent your comments to the graphics guy, we'll see. But the fact that it is working just fine in Windows and showing a marked difference on the Mac is what seems strange to me.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I've heard of this before, I think it's to do with the different colour profiles used by different operating system, but I don't know enough about graphics or Macs to tell you why it happens or if there's anything you can do about it...

    Using a tiled 1px image is a bad idea, and can make your site feel clunky and slow because of the extra processing needed by the browser.

    A better solution, if your banner image is a GIF or PNG, and the red area is a solid colour, is to make the red transparent so that the only red you see is the red of the background colour, and then there won't be any difference to notice.

  5. #5
    SitePoint Evangelist
    Join Date
    Nov 2009
    Posts
    471
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, are there issues with some browsers handling transparent graphics? Or do they all do that okay?

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    IE6 has issues with transparent PNGs, which I believe there is a work-around for. As far as I know, they all handle transparent GIFs fine.


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
  •