background-image and background-color

Merging colours

[Hagstrom]

I have made a background image where the right edge and bottom edge have the same colour (246,244,251). I want to display this image once and fill the rest of the document with that colour. So I have coded the following:

BODY {background-image: url(something.jpg);
 background-repeat: no-repeat;
 background-color: #F6F4FB;}

The problem is that the transition from image to background colour is very visible. My background image becomes coarse (visible squares) and the border is transformed into 248,248,255. On the other hand the background-colour is a mixture of (248,248,255), (248,240,248), (240,240,248) and (248,248,248)

I have the problem with IE& as well as with Firefox. So what is the moral? Should I only use colours that are divisble by eight?

[tedster]

There is always the chance of a color matching problem between images and background color. A computer set to 16-bit color will not render the same colors that a 24-bit setting will. And apparently browsers use a different approach when they render a background color compared to the approach they use when displaying an image. On early browsers like Netscape 2, this contrast was often quite stark.

Limiting your color choices to "divisible by 8" will not necessarily avoid the above problem, or the color rendering differences that are introduced by browsers, compared to a program like Photoshop.

I've found the best approach is testing by eye. In some color neighborhoods, the eye and brain are simply less sensitive than others and most people cannot discern small color shifts whereas a similar shift in another color neighborhood will jump out at you.

visible squares

This sounds like compression artifacts generated by the jpg compression algorithm. Try a higher percentage (less compression) when you generate the jpg from its source file. This will also limit any color shifts that are occurring. Or, if your image allows you to, use gif compression and fix the colors of the border to those you want to match.

[Hagstrom]

Hi Tedster

Thanks for answering. I thought there was a simple solution, which everybody in the world, except me, knew about :)

I've found the best approach is testing by eye.

But isn't there a risk that I only solve the problem for my own computer - and that it will look terribly on everybody else's computers?

This sounds like compression artifacts generated by the jpg compression algorithm.

Precisely, but there's nothing wrong with the image itself. It's just that IE6, Firefox and NS4 uglifies it.

[Saltminer]

The best way I have found to make sure the colors match is to tile a small image with the same color for the background.

I use like a 10x10 pixel image, and tile it to get the page background. Then place the main image at the top of the page over the background. Everything will match.

[Hagstrom]

But how do make the image act as a background? I.e. my text should appear on the image.

Do you use something like:

img { 
position:absolute; 
top:0px; 
left:20px;
[b]z-index: -1[/b]
} 

[Hagstrom]

A computer set to 16-bit color will not render the same colors that a 24-bit setting will.

Oops. I should have read your post more carefully Tedster ;) For reasons that I won't bore you with, my screen was set to 16-bits instead of 24-bits.

Thanks :)

[Saltminer]

I'd create a 10x10 or 20x20 pixel image in the background color you want. Then set it to tile and it will fill the page background.

body {
background-image: url(images/yourimage.gif);
background-repeat: repeat;
}

That will give you a solid page background using your image with the correct color.

Then position a heading image, or text as normal and it will appear "over" your tiled background image. If you use the same color for the small tiled image as for your heading image for example, the color match will be perfect and you won't see any color change or seams.

Jimmy

[tedster]

I agree that tiling an image in the background is a good way to match a foregound image -- but if I read Hagstrom correctly, he wants both a background jpg (no-repeat) and a background solid color (a tiled image in this new approach) -- and then further, some text as the actual content.

Hagstrom, perhaps you can nest divs (or tables) and assign a single color image to tile in the parent container's background, then use the jpg to display in the nested container's background.

[Hagstrom]

That's right, Tedster. I have a large cloud in the upper left corner - and the rest of the image and the background-color is "sky colour". The text appears superimposed on cloud and sky.

My problem was, as you suggested, that after an upgrade to Windows 98 SE 2 my colour settings were off.