Make text avoid a div, layout question.

Question

Here is a pic

So this is a picture of a website I host for a non-profit organization.

The picture is in a div that has the following attributes:

position:absolute; right:50px; top:50px;

What I want to do is make the text more visible because on different resolutions the picture will be in different locations, so I can either:

-make the text visible over the picture

-or make the text avoid the div (if possible)

So, do you guys have any ideas? Thanks :)

Answer 1

use this style also.. this will make your pic little bit transparent ..at what opacity you want.. and make text more clear..(if text is not part of pic)

 opacity:0.4;filter:alpha(opacity=40)

Answer 2

Firstly, it is not possible to flow text around an absolutely positioned div, as it is taken out of normal flow; see http://www.w3.org/TR/CSS2/visuren.html#choose-position

What you could do is use the following attributes:

float: right; margin-right: 50px;

And then place it in the right place to get i, which should achieve what you are trying to do. If you have it as the first element in , you could also add,

margin-top: 50px;

Hope that helps.

Answer 3

The readability problem is not just with your background image. Try avoiding using blue text on a blue background, that would help readability a lot.

Also, I'd avoid using photographs as a background for text altogether (instead, just make the photograph part of the content). But, if you don't feel like changing that part of the page, I'd simply go with a darker background and use white text.

Answer 4

I would add an RGBA background below the text and this area would occupy approx. half of the picture (lower or upper half).

Text over slideshows in http://www.tenwhil.com/ or http://airliquide.com/ as examples. In the latter check the conditional comments for IE6 and IE7 where filter is used for those browsers that don't understand rgba() notation. -ms-filter is in the main stylesheet, I didn't want to create a stylesheet for IE8 just for one instruction ...

background-color: rgb(64,64,64);  /* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
background-color: rgba(64,64,64, 0.7); /* recent browsers */

via conditional comment for IE<8
background-color: rgb(64,64,64);
filter: alpha(opacity:70);

edit:
The worst contrast of "small" text above background should be 4.5:1 as measured with a tool like Color Contrast Analyzer and 3:1 for headings (14px bold or 18px normal, approx.)