Friday 31 October 2014

CSS for High Contrast Mode (HCM) Friendly Images

Whenever user switch web site in High Contrast mode.
It makes the css background images invisible.

To solve this issue.

There are two ways
1) <img> tag
2) CSS using :before psuedo code

1) <img> tag

Replace backgound-image css with <img> tag . It will display in HCM

2) CSS using :before psuedo code

Use following css to display in HCM.

classname:before {
content: url(image path);
}