Hello,

I am trying to create a search box that has a transparent layer behind it on top of a picture. I'm using in-line CSS so that I can insert it into a webpage that has CSS I am not in control of without disturbing their settings.

At the moment I have succeeded in making the whole box transparent, which is not what I'd like. I tried setting the opacity to 0 in other places in effort to combat this, but I was unsuccessful.

Any help you might be able to offer would be much appreciated!

Here is my code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <?php include("include/head.htm"); ?>
    <script src="/js/is_touch.js" type="text/javascript"></script>
    <title>Mark O. Hatfield Library</title>
<script type="text/javascript"> 
function enterKey(evt) {
	var evt = (evt) ? evt : event
	var charCode = (evt.which) ? evt.which : evt.keyCode
	if (charCode == 13) {
		searchPrimo()
	}
} 
function searchPrimo() {
	document.getElementById("primoQuery").value = "any,contains," + 
		document.getElementById("primoQueryTemp").value;
	document.forms["primoForm"].submit();
}
function searchPrimoEvent(event) {
	if (event && event.which == 13) {
		document.getElementById("primoQuery").value = "any,contains," + 
			document.getElementById("primoQueryTemp").value;
		document.forms["primoForm"].submit();
	}
	else
		return true;
}
</script>

</head>

<body>
<div style="background-image:url('http://www.cu-portland.edu/sites/default/files/academics_library_972x300.jpg');background-repeat:no-repeat; height:300px">
<div style="position:relative; left:250px; top:85px; padding:10px; vertical-align: middle; background-color:#eAeFF1; height:25px; width:500px; opacity:.4;">
         <form action="http://alliance-primo.hosted.exlibrisgroup.com/primo_library/libweb/action/dlSearch.do" method="get" name="primoForm" enctype="application/x-www-form-urlencoded; charset=utf-8" onSubmit="searchPrimo()">

            <input type="hidden" name="institution" value="CONC">
            <input type="hidden" name="vid" value="CONC">
            <input type="hidden" name="tab" value="default_tab">
            <input type="hidden" name="mode" value="Basic">
            <input type="hidden" name="group" value="GUEST">
            <input type="hidden" name="onCampus" value="true">
            <input type="hidden" name="displayMode" value="full">
            <input type="hidden" name="highlight" value="true">
            <input type="hidden" id="primoQuery" name="query"/>
            <input type="hidden" name="displayField" value="all">


                <input style="width:280px; height:25px; padding:0px; vertical-align: middle; border:0px;" type="text" size="25" id="primoQueryTemp" value="" name="queryTemp"
                       onkeypress="return searchPrimoEvent(event)"/>

                <select style="height:25px; padding:0px; vertical-align: middle;" name="search_scope" id="cat_select" onChange="itemSelect('catalog');">
                    <option value="Everything" selected="selected">Everything
                    </option>
                    <option value="WU Libraries">WU Libraries</option>
                    <option value="Hatfield Library">Hatfield Library</option>
                    <option value="Law Library">Law Library</option>
                    <option value="Articles">Articles</option>
                </select>

                <input style="background-color:#003E7E; width: 80px; height:25px; border:2px solid #003E7E; padding: 0; vertical-align: middle; color: #eAeFF1;" type="button" id="go" title="Search" onClick="searchPrimo()" value="Search"/>
        </form> 
        </div>
        </div>
</body>        
</html>