Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > background color not matching

Reply
Thread Tools

background color not matching

 
 
Michael Satterwhite
Guest
Posts: n/a
 
      02-25-2005
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

 
Reply With Quote
 
 
 
 
Roy Schestowitz
Guest
Posts: n/a
 
      02-25-2005
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
 
Reply With Quote
 
 
 
 
Nico Schuyt
Guest
Posts: n/a
 
      02-25-2005
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


 
Reply With Quote
 
saz
Guest
Posts: n/a
 
      02-25-2005
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.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-25-2005
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
 
Reply With Quote
 
Kate
Guest
Posts: n/a
 
      02-26-2005

"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


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-26-2005
> "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


 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      02-26-2005
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.
 
Reply With Quote
 
Kate
Guest
Posts: n/a
 
      02-27-2005

"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


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-27-2005
> 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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Not able to display color in excel not able to display color in excel using xml sed_y XML 0 02-15-2012 09:46 PM
Changing font color from current font color to black color Kamaljeet Saini Ruby 0 02-13-2009 04:58 PM
rounded corners in which my border color is different than the background color laredotornado@zipmail.com Javascript 1 02-14-2007 07:37 AM
Problem with setting background color alternating item in datalist to a certain color fig000 ASP .Net Web Controls 0 09-06-2004 06:51 PM
Pattern matching : not matching problem Marc Bissonnette Perl Misc 9 01-13-2004 05:52 PM



Advertisments
 



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57