I am currently working on my website and I would like to display a notice to members when they open the site. This notice should only appear once, right above the HTML homepage, as the homepage content may vary for different members. I plan to use 'opacity' to create a faded effect over the homepage so that members can still see the content around the notice. Due to the inclusion of pictures, code snippets, and styling features such as font color, using an "alert" is not ideal. I have explored using 'opacity' with background images, but I am unsure how to apply this effect specifically to the HTML homepage of my site.
<html>
<head>
<style>
div.bacgro
{
width:500px;
height:250px;
background:url("url of my site's homepage");
border:2px solid black;
}
div.trabox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.trabox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="bacgro">
<div class="trabox">
<p>This is some text that is placed in the transparent box. It may contain some code and small profile image also ...
</p>
</div>
</div>
</body>
</html>
However, it is crucial for me to replace background:url of a jpg file; with
background:"url of my site's homepage";