background color not matching

Discussion in 'HTML' started by Michael Satterwhite, Feb 25, 2005.

  1. I have a .jpg image with a known background color (#F6F6FF). Using a style
    sheet, I specify background-color: #F6F6FF;. The problem is that when the
    page renders, the background color is *CLOSE* to the background-color of
    the image, but it doesn't match. As a result, the boundary of the .jpg is
    visible.

    What can I do to make these colors match?

    tia
    ---Michael
    Michael Satterwhite, Feb 25, 2005
    #1
    1. Advertising

  2. Michael Satterwhite wrote:

    > I have a .jpg image with a known background color (#F6F6FF). Using a style
    > sheet, I specify background-color: #F6F6FF;. The problem is that when the
    > page renders, the background color is *CLOSE* to the background-color of
    > the image, but it doesn't match. As a result, the boundary of the .jpg is
    > visible.
    >
    > What can I do to make these colors match?
    >
    > tia
    > ---Michael


    Use indexed colour palette in a format like PNG or GIF. JPEGs rely on
    wavelets and are an approximation. This means that the background of your
    image will not be guaranteed to match the background colour.

    Roy

    --
    Roy Schestowitz
    http://schestowitz.com
    Roy Schestowitz, Feb 25, 2005
    #2
    1. Advertising

  3. Michael Satterwhite

    Nico Schuyt Guest

    Michael Satterwhite wrote:
    > I have a .jpg image with a known background color (#F6F6FF). Using a
    > style sheet, I specify background-color: #F6F6FF;. The problem is
    > that when the page renders, the background color is *CLOSE* to the
    > background-color of the image, but it doesn't match. As a result, the
    > boundary of the .jpg is visible.
    > What can I do to make these colors match?


    Use another image. When the first one is in a div: set a background image
    for the body etc

    --
    Nico
    http://www.nicoschuyt.nl
    Nico Schuyt, Feb 25, 2005
    #3
  4. Michael Satterwhite

    saz Guest

    In article <fgFTd.49240$>, satterwh.X$NO$S
    $ says...
    > I have a .jpg image with a known background color (#F6F6FF). Using a style
    > sheet, I specify background-color: #F6F6FF;. The problem is that when the
    > page renders, the background color is *CLOSE* to the background-color of
    > the image, but it doesn't match. As a result, the boundary of the .jpg is
    > visible.
    >
    > What can I do to make these colors match?
    >
    > tia
    > ---Michael
    >
    >

    You are now experiencing the same problem we have all faced. Everything
    you code in HTML and CSS is a suggestion, not an absolute. All you can
    do is come close.

    You will never get an exact match. Every browser and every machine will
    render that background color in the manner in which it reads the code,
    not what you suggest. In your case, it gets worse when you are not
    using web safe colors.

    If this is a logo (instead of a picture) my suggestion is to make the
    image a transparent gif if possible.
    saz, Feb 25, 2005
    #4
  5. Michael Satterwhite wrote:
    > I have a .jpg image with a known background color (#F6F6FF). Using a style
    > sheet, I specify background-color: #F6F6FF;. The problem is that when the
    > page renders, the background color is *CLOSE* to the background-color of
    > the image, but it doesn't match. As a result, the boundary of the .jpg is
    > visible.
    >
    > What can I do to make these colors match?
    >
    > tia
    > ---Michael
    >

    JPG uses 'lossy' compression to reduce the file size of an image. It
    will reduce the number of colors by grouping area approximately the
    'same color' where in photographic style images the human eye will not
    notice the changes. What this means is that the #F6F6FF color pixel you
    set for that background may not be #F6F6FF in the final JPG. That is why
    bold hard-edged limited-color graphics work better with 'lossless'
    formats like GIF and PNG.


    My advice is if the images are 'photographic' in nature (> 256 colors)
    your are best to re-think your design where the mis-match will not me as
    noticeable, i,e,, contrasting backgrounds, borders or frames or use an
    image for your background taken from the final JPG. Or if your image is
    more 'graphic' or 'cartoonish' reduce the palette and use a transparent
    color to cutout the image and let the background color through.

    PNG formate does allow for 'lossless' compression and transparency, even
    graduated transparency but some browsers like MS IE do not full
    support PNG.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 25, 2005
    #5
  6. Michael Satterwhite

    Kate Guest

    "Michael Satterwhite" <satterwh.X$NO$S$> wrote in message
    news:fgFTd.49240$...
    > I have a .jpg image with a known background color (#F6F6FF). Using a style
    > sheet, I specify background-color: #F6F6FF;. The problem is that when the
    > page renders, the background color is *CLOSE* to the background-color of
    > the image, but it doesn't match. As a result, the boundary of the .jpg is
    > visible.
    >
    > What can I do to make these colors match?
    >
    > tia
    > ---Michael
    >


    I got around this problem by using a colour picker ( I use Eclipse Palette
    it's free at this address
    http://www.greeneclipsesoftware.com/eclipsepalette.html ) on the background
    colour of the image then using that colour in my css) It hasn't failed me
    yet.

    Hope this helps,
    Kate
    Kate, Feb 26, 2005
    #6
  7. Michael Satterwhite

    dorayme Guest

    > "Michael Satterwhite" <satterwh.X$NO$S$> wrote in message
    > news:fgFTd.49240$...
    >> I have a .jpg image with a known background color (#F6F6FF). Using a style
    >> sheet, I specify background-color: #F6F6FF;. The problem is that when the
    >> page renders, the background color is *CLOSE* to the background-color of
    >> the image, but it doesn't match. As a result, the boundary of the .jpg is
    >> visible.
    >>
    >> What can I do to make these colors match?
    >>
    >> tia
    >> ---Michael
    >>

    >
    > I got around this problem by using a colour picker ( I use Eclipse Palette
    > it's free at this address
    > http://www.greeneclipsesoftware.com/eclipsepalette.html ) on the background
    > colour of the image then using that colour in my css) It hasn't failed me
    > yet.
    >
    > Hope this helps,
    > Kate



    Yes, I have found that this problem comes up more when the colour concerned
    is not a websafe colour (websafe colours are from a special palette that
    most web browsers support, a small subset of all colours).

    If it is "a known colour" as the OP says, how can a colour picker solve the
    problem?

    I have done this to get around the issue: change the jpg bg colour to a
    websafe one. This may or may not be your cup of tea. Mostly not so hard. In
    Photoshop, for example, you can select (via paths or magic wands or
    menus...) the colour concerned, or - importantly - enough of it on the edges
    and substitute a close looking websafe one. In other words, prepare the pic
    to suit the popular browsers rather than find a way to get them to suit the
    pic.

    dorayme
    dorayme, Feb 26, 2005
    #7
  8. in alt.html, dorayme wrote:
    > > "Michael Satterwhite" <satterwh.X$NO$S$> wrote in message
    > > news:fgFTd.49240$...
    > >> I have a .jpg image with a known background color (#F6F6FF). Using a style
    > >> sheet, I specify background-color: #F6F6FF;. The problem is that when the
    > >> page renders, the background color is *CLOSE* to the background-color of
    > >> the image, but it doesn't match. As a result, the boundary of the .jpg is
    > >> visible.


    Problems:
    1. JPG is not necessarily sving the color exactly
    2. 16bit colors may cause problems on 24bit images

    Solutions:
    1. Use png or other lossless format
    2. Uee png or other image with transparency

    > > I got around this problem by using a colour picker ( I use Eclipse Palette
    > > it's free at this address
    > > http://www.greeneclipsesoftware.com/eclipsepalette.html ) on the background
    > > colour of the image then using that colour in my css) It hasn't failed me
    > > yet.


    That would work, assuming the problem is #1. In case of #2, it just looks
    to solve problem, and might even cause another.

    > Yes, I have found that this problem comes up more when the colour concerned
    > is not a websafe colour (websafe colours are from a special palette that
    > most web browsers support, a small subset of all colours).


    Websafe colors are not websafe. As user of any 16bit color can see.

    Web safe colors are relic from age when 8 bit display drivers and thus
    256 colors were usual. 256 colors are very unusual today. 2 colors are
    much more used. As is 16bit (65 thousand color). So called websafe colors
    aren't on either, so there is no sence to limit yourself to them.

    > If it is "a known colour" as the OP says, how can a colour picker solve the
    > problem?


    To tell if the color really is what it is supposed to be. Jpg is lossy
    format, and it might have changed while saving.

    > I have done this to get around the issue: change the jpg bg colour to a
    > websafe one.


    I have tried it many times, but it usually don't work...

    > This may or may not be your cup of tea. Mostly not so hard. In
    > Photoshop, for example, you can select (via paths or magic wands or
    > menus...) the colour concerned, or - importantly - enough of it on the edges
    > and substitute a close looking websafe one.


    If you only get area near edge, there still will be difference at some
    point. And changing background of jpg might be almost impossible. But if
    OP is maker of this jpg, he should have orginal somewhere.

    > In other words, prepare the pic
    > to suit the popular browsers rather than find a way to get them to suit the
    > pic.


    Yes.

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Lauri Raittila, Feb 26, 2005
    #8
  9. Michael Satterwhite

    Kate Guest

    "dorayme" <> wrote in message
    news:BE47488D.EE98%...

    > >>
    > >> What can I do to make these colors match?
    > >>
    > >> tia
    > >> ---Michael
    > >>

    > >
    > > I got around this problem by using a colour picker ( I use Eclipse

    Palette
    > > it's free at this address
    > > http://www.greeneclipsesoftware.com/eclipsepalette.html ) on the

    background
    > > colour of the image then using that colour in my css) It hasn't failed

    me

    >
    >
    > Yes, I have found that this problem comes up more when the colour

    concerned
    > is not a websafe colour (websafe colours are from a special palette that
    > most web browsers support, a small subset of all colours).
    >
    > If it is "a known colour" as the OP says, how can a colour picker solve

    the
    > problem?


    When I have used this method in the past, where the colour has not been
    saved to what
    you thought it was, the colour picker was useful in allowing me to get the
    code. As this Eclipse Pallet allows you to exports the colour in these
    formats.

    <C&P from their website>-------------

    HTML #FFFFFF
    raw 32-bit integer
    Visual Basic &hFFFFFF
    Visual Basic RGB(255, 255, 255)
    C++, C#, Java 0xFFFFFF

    ------------------------------------------------

    It was just a suggestion, that's all. As I have stated it has worked for me
    in the past, I'm sorry I was just trying to help.

    Have a good Sunday,
    Kate
    Kate, Feb 27, 2005
    #9
  10. Michael Satterwhite

    dorayme Guest

    > in alt.html, dorayme wrote:
    >>> "Michael Satterwhite" <satterwh.X$NO$S$> wrote in message
    >>> news:fgFTd.49240$...
    >>>> I have a .jpg image with a known background color (#F6F6FF). Using a style
    >>>> sheet, I specify background-color: #F6F6FF;. The problem is that when the
    >>>> page renders, the background color is *CLOSE* to the background-color of
    >>>> the image, but it doesn't match. As a result, the boundary of the .jpg is
    >>>> visible.

    >
    > Problems:
    > 1. JPG is not necessarily sving the color exactly
    > 2. 16bit colors may cause problems on 24bit images
    >
    > Solutions:
    > 1. Use png or other lossless format
    > 2. Uee png or other image with transparency
    >
    >>> I got around this problem by using a colour picker ( I use Eclipse Palette
    >>> it's free at this address
    >>> http://www.greeneclipsesoftware.com/eclipsepalette.html ) on the background
    >>> colour of the image then using that colour in my css) It hasn't failed me
    >>> yet.

    >
    > That would work, assuming the problem is #1. In case of #2, it just looks
    > to solve problem, and might even cause another.


    If it was #2, what might the problem be? Interesting that you raise this
    issue of different bit colour. Perhaps this is getting a bit ot, but would
    appreciate any link to a good discussion of the issue.

    >> Yes, I have found that this problem comes up more when the colour concerned
    >> is not a websafe colour (websafe colours are from a special palette that
    >> most web browsers support, a small subset of all colours).

    >
    > Websafe colors are not websafe. As user of any 16bit color can see.
    >
    > Web safe colors are relic from age when 8 bit display drivers and thus
    > 256 colors were usual. 256 colors are very unusual today. 2 colors are
    > much more used. As is 16bit (65 thousand color). So called websafe colors
    > aren't on either, so there is no sence to limit yourself to them.


    OK... um... well...I'm a relic myself actually... but I want to be more
    modern. I have been thinking lately to move from the use of websafe palettes
    for general website construction as I do notice that many nice sites use the
    full range of #RRBBGG; I find that it is easier to become familiar with the
    vastly smaller subset colours and their notation and had been thinking that
    doing a lot with a little is a good thing... but I digress.

    >
    >> If it is "a known colour" as the OP says, how can a colour picker solve the
    >> problem?

    >
    > To tell if the color really is what it is supposed to be. Jpg is lossy
    > format, and it might have changed while saving.


    Yes, I see your point about colour changing from original to jpg compressed.
    I was thinking the OP knew the resulting pic's colour. On the issue of
    changing the jpg itself, my impression has been that there are no surprises
    in colour if one does not redo the compression.

    >> I have done this to get around the issue: change the jpg bg colour to a
    >> websafe one.

    >
    > I have tried it many times, but it usually don't work...


    >> This may or may not be your cup of tea. Mostly not so hard. In
    >> Photoshop, for example, you can select (via paths or magic wands or
    >> menus...) the colour concerned, or - importantly - enough of it on the edges
    >> and substitute a close looking websafe one.

    >
    > If you only get area near edge, there still will be difference at some
    > point. And changing background of jpg might be almost impossible. But if
    > OP is maker of this jpg, he should have orginal somewhere.


    Well, yes, it needs sensitive handling and depends on the pic and what is
    desired for integration on the page, one would not simply select a band
    around the edges... If the OP had original pic, there would still be the
    problem of compression change...

    >
    >> In other words, prepare the pic
    >> to suit the popular browsers rather than find a way to get them to suit the
    >> pic.

    >
    > Yes.


    Well, maybe you are just being nice here! If one is free to use millions of
    colours in website construction, maybe one can design to suit the pics more!

    dorayme
    dorayme, Feb 27, 2005
    #10
  11. in alt.html, dorayme wrote:
    > > in alt.html, dorayme wrote:
    > >>> "Michael Satterwhite" <satterwh.X$NO$S$> wrote in message
    > >>> news:fgFTd.49240$...
    > >>>> I have a .jpg image with a known background color (#F6F6FF). Using a styl
    > >>>> sheet, I specify background-color: #F6F6FF;. The problem is that when the
    > >>>> page renders, the background color is *CLOSE* to the background-color of
    > >>>> the image, but it doesn't match.


    > > Problems:
    > > 2. 16bit colors may cause problems on 24bit images
    > >
    > > Solutions:
    > > 2. Use png or other image with transparency


    > If it was #2, what might the problem be?


    Rounding of color. In 16bit display drivers 24bit colors are rounded
    (or dithered?). This happens differently, and you can't really predict
    it, or at least I have not found a way. But if you "fix" issue by
    changing background color to what it seems to be in image, you will
    result problems on other things.

    > Interesting that you raise this
    > issue of different bit colour. Perhaps this is getting a bit ot, but would
    > appreciate any link to a good discussion of the issue.


    Don't have one handy. Thare was discussion about this in here, ciwas or
    ciwah some time ago.

    > > Web safe colors are relic from age when 8 bit display drivers and thus


    > I do notice that many nice sites use the full range of #RRBBGG;


    That worked on age of 8bit as well (at least on end of the age), exept
    that you neede to be careful on how many colors you did use. (if you only
    used few, it was usually no problem.)

    > I find that it is easier to become familiar with the
    > vastly smaller subset colours and their notation.


    I have been using full hex codes almost 10 years, and I am starting to
    get grip of them. So I don't need color chooser anymore.

    > original pic, there would still be the problem of compression change...


    But you could try to tweak settings as long as it will reasult right
    color...

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Lauri Raittila, Feb 27, 2005
    #11
  12. Michael Satterwhite

    dorayme Guest

    > "dorayme" <> wrote in message
    > news:BE47488D.EE98%...
    >
    >>>>
    >>>> What can I do to make these colors match?
    >>>>
    >>>> tia
    >>>> ---Michael
    >>>>
    >>>
    >>> I got around this problem by using a colour picker ( I use Eclipse

    > Palette
    >>> it's free at this address
    >>> http://www.greeneclipsesoftware.com/eclipsepalette.html ) on the

    > background
    >>> colour of the image then using that colour in my css) It hasn't failed

    > me
    >
    >>
    >>
    >> Yes, I have found that this problem comes up more when the colour
    >> concerned is not a websafe colour (websafe colours are from a special palette
    >> that most web browsers support, a small subset of all colours).
    >>
    >> If it is "a known colour" as the OP says, how can a colour picker solve

    > the
    >> problem?

    >
    > When I have used this method in the past, where the colour has not been
    > saved to what
    > you thought it was, the colour picker was useful in allowing me to get the
    > code. As this Eclipse Pallet allows you to exports the colour in these
    > formats.
    >
    > <C&P from their website>-------------
    >
    > HTML #FFFFFF
    > raw 32-bit integer
    > Visual Basic &hFFFFFF
    > Visual Basic RGB(255, 255, 255)
    > C++, C#, Java 0xFFFFFF
    >
    > ------------------------------------------------
    >
    > It was just a suggestion, that's all. As I have stated it has worked for me
    > in the past, I'm sorry I was just trying to help.
    >
    > Have a good Sunday,
    > Kate
    >
    >


    No, it was a good suggestion Kate. I was thinking the op knew the colour...
    I want now to have a better Monday... :) dorayme
    dorayme, Feb 27, 2005
    #12
  13. Michael Satterwhite

    Kate Guest

    "dorayme" <> wrote in message
    news:BE48A12E.EFC1%...
    > > "dorayme" <> wrote in message
    > > news:BE47488D.EE98%...
    > >
    > >>>>
    > >>>> What can I do to make these colors match?
    > >>>>
    > >>>> tia
    > >>>> ---Michael
    > >>>>
    > >>>
    > >>> I got around this problem by using a colour picker ( I use Eclipse

    > > Palette
    > >>> it's free at this address
    > >>> http://www.greeneclipsesoftware.com/eclipsepalette.html ) on the

    > > background
    > >>> colour of the image then using that colour in my css) It hasn't

    failed
    > > me
    > >
    > >>
    > >>
    > >> Yes, I have found that this problem comes up more when the colour
    > >> concerned is not a websafe colour (websafe colours are from a special

    palette
    > >> that most web browsers support, a small subset of all colours).
    > >>
    > >> If it is "a known colour" as the OP says, how can a colour picker solve

    > > the
    > >> problem?

    > >
    > > When I have used this method in the past, where the colour has not been
    > > saved to what
    > > you thought it was, the colour picker was useful in allowing me to get

    the
    > > code. As this Eclipse Pallet allows you to exports the colour in these
    > > formats.
    > >
    > > <C&P from their website>-------------
    > >
    > > HTML #FFFFFF
    > > raw 32-bit integer
    > > Visual Basic &hFFFFFF
    > > Visual Basic RGB(255, 255, 255)
    > > C++, C#, Java 0xFFFFFF
    > >
    > > ------------------------------------------------
    > >
    > > It was just a suggestion, that's all. As I have stated it has worked

    for me
    > > in the past, I'm sorry I was just trying to help.
    > >
    > > Have a good Sunday,
    > > Kate
    > >
    > >

    >
    > No, it was a good suggestion Kate. I was thinking the op knew the

    colour...
    > I want now to have a better Monday... :) dorayme



    A good Irish friend of mine used to say "may all of your horizons, rise up
    to greet you". Have a good Monday and here's to your horizons! ;-)

    Kate
    Kate, Feb 28, 2005
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. fig000
    Replies:
    0
    Views:
    4,544
    fig000
    Sep 6, 2004
  2. Kamaljeet Saini
    Replies:
    0
    Views:
    405
    Kamaljeet Saini
    Feb 13, 2009
  3. sed_y
    Replies:
    0
    Views:
    1,011
    sed_y
    Feb 15, 2012
  4. Marc Bissonnette

    Pattern matching : not matching problem

    Marc Bissonnette, Jan 8, 2004, in forum: Perl Misc
    Replies:
    9
    Views:
    231
    Marc Bissonnette
    Jan 13, 2004
  5. Replies:
    1
    Views:
    266
    marss
    Feb 14, 2007
Loading...

Share This Page