Semi transparent text container

  • I’m really happy with my website, other than the clarity of the text, I think I either need to add a semi transparent or blurred background to the text boxes, or add a semi transparent overlay to the whole background image. Any suggestions on how I can do this?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Or you could adjust the opacity of the background image.
    It might just be easier to edit the background image in photoshop or gimp and reduce the saturation or contrast.

    Anonymous User

    (@anonymized-14834838)

    I always find adding a dark overlay to the background works out nice. In your theme add the following just above the closing </body> tag:

    <div class="bgoverlay"></div>

    Then in your css add the following:

    .bgoverlay{
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    z-index: 1;
}
#maincontainer {
position:relative;
z-index:2;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Semi transparent text container’ is closed to new replies.