Change font color based on the background image dominating color(in the text area)

Question

I am having some difficulties in setting the proper font color for some elements, because i use different images as background. For example i am using only white, but when i have a background with lighter colors int the text area, the text simply becomes unreadable.

Is there anyway to do this? I have googled and found many solutions but they are for background colors and not images. I also found out that its better to use serverside ex:php language rather than clientside ex:javascript.

If anyone has any ideas, or atleast some links to helping pages, i'd be grateful. Thanks.

Answer 1

may be create a table on top of your image. This way you can control the area of your text with a contrasting color and you can change you font to whatever you like. The image in the background can stay to whatever you like and I am assuming the image is in the body of your page. Anyways,this is I could think of for you and I hope it helps. I know colors and images are always hard and time consuming to get them set up.

<table border="0" bgcolor="#00FF00">
  <tr>
    <th>day</th>
    <th>Saving</th>
  </tr>
  <tr>
    <td>January</td>
    <td>something</td>
  </tr>
</table>

Answer 2

I would suggest using css classes to specify background images and font colors... that way you can specify the font color as a function of the background.

.notification {
    background-color: #0000ff; // bright blue
    background-image: url('/path/to/texture.png');
    color: "white";
}

.article {
    background-color: #ffff00; // yellow;
    background-image: url('/path/to/texture.png');
    color: black;
}

then when you right in the document you will do so by role, this assumes the type attribute of you widget is either notification or article for this example.

foreach($widgets as $widget){
?>
  <div class='<?= $widget->type; ?>'>
  <?= $widget->content; ?>
  </div>
<?php
}