Share |

Text Over Image
PayneLess Designs

Checked in:
Firefox 2.0 and IE 7.0

One terrific site that has good tutorials on CSS Opacity is quirksmode.com. Be sure to check out the site. For CSS 3 Opacity, see css3.info. Additionally: "Pure CSS opacity and how to have opaque children" at Steven York's Tutorials is a very good read.

Code:

CSS Used:

/* Opacity code for FF and IE */
.navi {
width: 100%;
height: 327px;
background: transparent url(path to image) no-repeat center fixed;
filter: alpha(opacity=50);
-moz-opacity:.50;
opacity: .50;
font-size: 1em;
line-height: 2em;
}

#navi {
width: 100%;
height: 327px;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);
-moz-opacity: 0.50;
opacity:0.5;
background: transparent url(path to image) no-repeat center scroll;
}

/* optional:
.link1 { position: absolute; top: 40%; left: 42%; }
.link2 { position: absolute; top: 43%; left: 42%; }
.link3 { position: absolute; top: 46%; left: 42%; }
.text1 { font-weigh: 900; color: #fff; position: absolute; top: 50%; left: 42%; }
*/

.link1 { padding-top: 15%; padding-left: 30%; }
.link2 { padding-left: 30%; }
.link3 { padding-left: 30%; }

.toi a:link { 
font-family: verdana;
font-weight: bold;
color: #0ff;
background: #f0f; 
}

Optional CSS:

.text1 { padding-left: 30%; font-weigh: 900; color: #070; }

HTML:

<div style="width: 500px; margin: 5% auto;">
<div  class="navi toi" id="navi">
<div class="link1"><a href="YourURLHere" title="Link One">Link One</a></div>
<div class="link2"><a  href="YourURLHere" title="Link Two">Link Two</a></div>
<div class="link3"><a  href="YourURLHere" title="Link Three">Link Three</a></div>
<div class="text1">Checked in:<br>Firefox 2.0 and IE 7.0</div>
</div></div>

« Links open in new window/tab »

« Links open in new window/tab »

Monitor Page for Changes

Text Over Image
PayneLess Designs

Code:

« Links open in new window/tab »

« Links open in new window/tab »

Monitor Page for Changes

Text Over ImagePayneLess Designs

Code:

Text Over Image
PayneLess Designs