Solution for Different Machine / Monitors Display Differently [on hold]

My website is displayed differently on different monitors. Again I repeat that different monitors, not the browsers.

Technically I have used CSS Opacity to control the darkness of image.

Please check the following screenshot. You can see that the difference of them.

Is there any possible way to give better user experience in this situation. I mean I wanted to display following area as screenshot 01 in all monitors since screenshot B and C has their own advanatges and I have mentioned them top of the screenshot.


  1. This is what I want (When I set Opacity as 70% my site appear as following screenshot in my machine)

enter image description here

  1. Friend A machine ( Image is not clear)

enter image description here

  1. Friend B Machine ( Hard to read text)

enter image description here