0

Can we change the color of the text based on the color of the background image? I have a background image which i have appended it to body. When you reload the page every time the background image gets changed. But i have my menus which are positioned on the image having text color as black. If the background image is black, menus wont be visible. Any solutions for my problem? Thanks in advance.

Preethi
  • 371
  • 2
  • 6
  • 20

2 Answers2

4

use switch case to handle

switch(backgroundimage){
  case "black.jpg":
    document.body.color = "white";
  break;
  case "white.jpg":
    document.body.color = "black";
  break;
  case "green.jpg":
    document.body.color = "gray";
  break;
}
elclanrs
  • 92,861
  • 21
  • 134
  • 171
scripter
  • 132
  • 8
0

If you know what will be the image that will be loaded you can create a dictionary with the image name and the css class that will be appended to the text for it. then on page load attach the class to the body classes.

If you dont know the image that will be loaded there are some solutions but they are not complete. look at this answer

Community
  • 1
  • 1
AMember
  • 3,037
  • 2
  • 33
  • 64
  • Hi, i dont know what will be the image that will be loaded – Preethi Feb 09 '14 at 10:36
  • 1
    I have tried with background check plugin, https://github.com/kennethcachia/Background-Check I have added the background-check.js file and in css i have mentioned, a.background--dark { color: white; } a.background--complex { color: gray; } But it doesn't work – Preethi Feb 09 '14 at 10:50