Designing a web page can be really easy, but when you have to implement it using XHTML, CSS and pictures, to get a perfect mix, it’s a lot less easy. Also a small part of your page can become really difficult to build in, especially if you want to get exactly what have been designed with a graphic design tool. One of the tough tasks is to mix up correctly colors in the CSS and in the pictures you have included in your pages.

Today I will discuss how to correctly include a picture in a text page making it completely integrated. 

There are some considerations to be done and rules to be followed:

Colors. The same color is displayed differently on a style sheet compared to a picture. 

Browser. The same color can be displayed differently on different web browser

Formats. Pictures can be stored in different formats, such as  jpg, png or gif. Different picture formats make the same color looking slightly different. So, you have to make use of the same format for all the images you put on your web pages. It's really important, especially if the colors you are using are not "web safe".

If you are forced to use pictures and a style sheet tightly integrated on a page, you have to decide how to make their colors displaying identical. Let's go through a small sample.

Working on WorkOutLoud I had to implement this portion of a page:

In the previous  image there's a portion on the right side where the light blue rectangle change shape and goes over the beige rectangle:

Now, this design have been made using Apple KeyNote in a few minutes. It didn't take time to me decide that the metaphor I used was ok and that it looked pretty nice too. In my CSS the two rectangles were colored using the  "color: " attribute, and the arrow shape was an image. So as a first solution I tryed with an arrow shape transparent on blue side - in order to get the same blue from the background of the rectangle - and the beige side colored directly on the image. In this way I got something like this:

The final result was not really good: the beige side of the arrow image was looking  differently from the beige on the backgorund. Of course I could try the other way around: leaving the beige side transparent - in order  to get the color from the background rectangle - coloring the blue side, but I could assure you that I would get the same result. 

The real problem is that colors appearance strictly depend on the render method you apply to show them up.

Actually is really simple, and many of you already know the answer. In a case like this the image has to win, and the best thing you can do is coloring the beige rectangle using the "background-image" attribute in this way:

Of course the "one_pixel_beige_image.png" must be a pixel with the same color as the beige side of the arrow image.

This small trick solved my problem.