[SOLVED] Background opacity, everything on top 100% normal
Posted: Sat Mar 13, 2010 10:36 pm
Hello,
I am busy trying to make a site for me and my fishing mates. I want it to have a background image and on top of that a wrapper with 60% opacity so that the background is still visible. However, the content should be normal, not opacity. After long searching and trying I managed this, but now I cannot ensure that if I have lots of content (a long page) the opacity still works below 100% of my screen size. The following link will explain what I mean.
Preferibly I want the footer to be in the same opacity div as well.
http://deadbait.nl/test/
This is my template. I needed the in it to make the opacity thing work.
This is my stylesheet:
Hopefully somebody understands my point and knows a solution. All help is very appreciated.
- Thanks Evert
I am busy trying to make a site for me and my fishing mates. I want it to have a background image and on top of that a wrapper with 60% opacity so that the background is still visible. However, the content should be normal, not opacity. After long searching and trying I managed this, but now I cannot ensure that if I have lots of content (a long page) the opacity still works below 100% of my screen size. The following link will explain what I mean.
Preferibly I want the footer to be in the same opacity div as well.
http://deadbait.nl/test/
This is my template. I needed the in it to make the opacity thing work.
Code: Select all
{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
{literal}
<head>
<title></title>
<link href="irrelevant6.css" media="screen" rel="stylesheet">
<style type="text/css">
#one {
position:relative;
}
#two,
#thr {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
}
#two {
z-index: 1;
}
#thr {
background: white;
border: 1px solid black;
opacity: 0.7;
filter:alpha(opacity=70);
}
</style>
{/literal}
</head>
</__body>
<div id="one">
<div id="two">
<div id="header">header
<div id="menu">
{menu template='cssmenu.tpl' number_of_levels='1'}
</div>
</div>
<div class="wrapper">
<div id="leftcolumn">
{content block='Linkerkantje'}
</div>
<div id="content">
<h2>{title}</h2>
{content}
<br />
</div>
<div id="rightcolumn">{global_content name='sponsors'}</div>
<div class="push"></div>
</div>
<div class="footer">
<p>FOOTER TEKST</p>
</div>
</div>
<div id="thr"></div>
</div>
<__body>
</__html>
Code: Select all
* {
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* de margin waarde 'bottom' is de negatieve waarde van de footer grootte, dit is ter compensatie */
}
.footer, .push {
height: 100px; /* .push moet dezelfde hoogte hebben als .footer */
border: 1px solid yellow;
clear:both;
color: red;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
background: url('uploads/images/img_black_bottom_low_top.png') #000;
background-repeat: no-repeat;
}
#one {
width: 900px;
height: 100%;
position: absolute !important;
left: 50%;
margin: 10px 0 0 -450px;
background: url('bg2.gif');
background-repeat: repeat-y;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
margin: 5px 5px 5px 0px;
width: 170px;
float: left;
}
#content {
float: left;
color: #000;
border: 1px solid #ccc;
margin: 0px 5px 5px 0px;
padding: 0px;
width: 498px;
display: inline;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: none;
margin: 0px 0px 5px 0px;
padding: 0px;
width: 195px;
float: left;
display: inline;
}
#header {
width: 900px;
margin: 0 auto;
height: 100px;
border: 1px solid red;
position: relative;
}- Thanks Evert
