The dream is essentially to have a fixed top-matter (title, image), which is transparent above a starry background that would scroll as the page scrolls. THE CATCH: the white bottom area, holding the main text of the page, would not come between the transparent title/image and the starry background. Are z-indexes the answer? I've been trying, but no cigar.
If impossible: let me know and I will stop being a madwoman. I feel like I've seen clever commercial websites that do this. But it's only a feeling, otherwise I'd be looking at their source code.
I'm having a few other issues (the white backgorund of the text ends ... before the text does. WHY.) but this is the big one.
Here are my codes for the HTMl and the CSS:
Code: Select all
<!DOCTYPE html>
<head>
<title>P E A C E A B L E : a shrine to urdknot wrex</title>
<link Href="wrex.css" type="text/css" rel="stylesheet">
</head>
<div class="top">
<div class="top-wrex"></DIV>
<div class="top-title"><IMG SRC="WREX_TITLE_RIGHT.PNG"></DIV>
</dIV>
<div class="bottom">
<div class="menu">
<ul><H1>WREX</H1>
<li>BASICS</LI>
<LI>DESIGN</LI>
<LI>MASS EFFECT</LI>
<LI>KROGAN HISTORY</LI>
<LI>PSYCHOLOGY</LI>
<LI>GENDER</LI>
<LI>CREW</LI>
<LI>HYPE</LI>
<LI>ME</LI>
<LI>ESCAPE</LI>
</UL>
</div>
<DIV class="main">
<h1>WREX <IMG SRC="versus.png" id="versus"> THE WORLD</H1>
<P>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elit nulla, gravida quis quam quis, porttitor facilisis quam. Maecenas ultrices tempus ex. Vivamus aliquet eu neque a sollicitudin. Duis varius diam arcu, a vehicula leo aliquam quis. Suspendisse congue eleifend fermentum. Ut magna nibh, porttitor sed iaculis fermentum, accumsan eu ligula. Vestibulum mattis dignissim convallis. Curabitur at augue vel lorem sollicitudin placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec accumsan odio sed nibh semper fringilla. Proin eleifend, nisi in ornare condimentum, leo tortor tincidunt metus, et mollis neque leo at quam.
Proin faucibus non urna non commodo. Phasellus commodo ligula pellentesque libero mattis tristique. Quisque tincidunt, quam nec mattis varius, turpis libero fermentum augue, faucibus tristique sapien tellus non justo. Proin a sem ut mauris feugiat dignissim. Integer et nulla et nulla aliquam tincidunt. Vivamus hendrerit, erat vitae vulputate vulputate, sem enim tincidunt nulla, nec efficitur ex sem et nisi. Aliquam pellentesque lacus at vestibulum ornare. Duis posuere egestas nunc at tincidunt. In finibus felis quis porta iaculis. Nullam pharetra, risus quis convallis pretium, neque ligula rutrum ipsum, quis blandit ipsum felis at orci. Sed dictum feugiat vehicula. Phasellus rutrum nunc sit amet mollis ornare. Fusce vitae nunc in ante sodales mattis. Vestibulum at euismod leo. Suspendisse potenti.
Curabitur eget nunc sem. In et dui aliquam, porttitor risus quis, iaculis nisi. Donec eget leo rhoncus, posuere ipsum a, vestibulum massa. Aenean gravida eget risus sagittis mattis. Sed ac tristique leo. Quisque rhoncus ante id vestibulum consequat. Vivamus feugiat convallis tellus. Phasellus ultrices turpis libero, quis condimentum arcu maximus eget. Pellentesque imperdiet erat at pharetra accumsan. Aliquam sit amet tellus justo. Proin ac venenatis magna, at finibus nibh. Phasellus non purus tortor. Cras sodales accumsan justo, a vulputate lectus auctor pretium. Fusce sit amet tortor vulputate, viverra turpis at, imperdiet erat. Nam pellentesque metus vel orci feugiat, ac pellentesque magna sagittis. Mauris ut orci lorem.
Ut sollicitudin eget magna ac finibus. Nulla varius, sem a suscipit dictum, felis turpis mattis orci, ut lobortis libero orci ut elit. Vestibulum et lobortis orci, quis ullamcorper ligula. Ut convallis massa id purus convallis, a semper erat tincidunt. Nullam facilisis justo nec efficitur pretium. Etiam vestibulum pellentesque suscipit. Maecenas ornare interdum massa placerat pretium. Nunc laoreet finibus erat. Aenean sed ante et nisl fermentum fermentum. Sed sed finibus enim. Vivamus tincidunt ultrices sollicitudin. Donec vulputate libero sapien, nec rhoncus odio sollicitudin eu. Suspendisse eu placerat arcu, eu bibendum quam. Curabitur ullamcorper interdum lorem id hendrerit. Quisque a dui a diam malesuada eleifend ac at mauris.
Morbi dapibus magna eget ante porta vulputate. Phasellus nulla justo, ornare at felis et, porttitor faucibus nibh. Maecenas lobortis volutpat purus et pulvinar. Integer bibendum dolor dui, non rhoncus nisi rhoncus et. Donec feugiat at velit ac faucibus. Nam felis justo, interdum ac viverra at, pharetra in nisi. Donec rutrum facilisis sapien at mollis. Sed ligula sem, facilisis ut massa ac, fermentum placerat lectus. Vivamus sit amet urna quis enim hendrerit dignissim quis sit amet orci.
Aenean laoreet nisl facilisis facilisis vehicula. Nulla facilisi. Nullam vehicula elit a finibus gravida. Vivamus malesuada lectus nisl, in interdum ligula commodo consectetur. Nunc semper ac nisi vitae placerat. Maecenas at lacus enim. Mauris iaculis mi magna, eu cursus nulla malesuada ac. Praesent efficitur neque arcu, in commodo nunc consectetur eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempor imperdiet libero, a vehicula lorem convallis eget. Ut sit amet lorem non lorem aliquet malesuada sed eget orci. Duis porttitor laoreet purus, in venenatis mi euismod ac. Donec purus metus, bibendum quis odio id, pretium accumsan massa. Praesent sed scelerisque leo, ut commodo erat. Sed nisl mauris, varius malesuada sodales quis, ornare ut risus. Nullam hendrerit augue non eros ornare, non mollis nulla ornare.
Quisque sodales velit ut augue finibus convallis. Sed vehicula sollicitudin sem, id tincidunt urna molestie vel. Proin vitae blandit felis, in consequat enim. Quisque eleifend dapibus nisl, finibus vulputate lorem egestas non. Phasellus egestas est nec ligula tincidunt volutpat. Ut a imperdiet turpis. Vivamus semper massa facilisis nulla vestibulum, nec vestibulum enim commodo. Etiam tincidunt enim eget eleifend fermentum. Integer dictum scelerisque ex, sed rutrum leo egestas quis. Praesent metus massa, vehicula et iaculis id, dignissim et ipsum. Etiam tempus non dui sed venenatis. Praesent ullamcorper lacinia lacus, rutrum facilisis augue ornare id.
Suspendisse vel tempus orci. Donec tellus nisl, feugiat at faucibus sit amet, egestas molestie felis. Sed quis tortor fermentum, euismod magna in, facilisis velit. Aenean tincidunt enim eget euismod posuere. Nam dictum nisi libero, lobortis pharetra arcu porttitor at. Nulla facilisi. Pellentesque varius turpis dolor, in vestibulum massa tempus id.
Vestibulum eget leo auctor, mollis sem in, consequat enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur venenatis nec ligula et maximus. Donec enim libero, consequat porta libero a, sodales tempor nunc. Nullam sodales nisi non arcu congue sagittis. Fusce dapibus turpis a auctor sagittis. Vivamus nec sapien euismod, volutpat libero non, convallis velit. Maecenas congue leo vitae sem cursus, ac sollicitudin sem mattis. Pellentesque tellus arcu, maximus dignissim venenatis nec, dignissim quis est. Sed sit amet rutrum nisl. Quisque vitae tortor velit. Curabitur dictum tempor viverra. Vivamus sed quam ac nisi blandit pharetra. Aliquam quis vehicula justo.
Integer fermentum, lectus et varius aliquet, lacus enim fermentum felis, sit amet dapibus turpis mauris id sapien. Vestibulum sed suscipit ante. Ut pretium malesuada massa, in euismod mauris auctor eu. Duis sed mi id purus sollicitudin porttitor. Aenean posuere nisl in mi consectetur tincidunt. Suspendisse sit amet ultricies tortor, vel vulputate est. Etiam vestibulum, mauris vel suscipit laoreet, turpis lectus efficitur ante, a pretium libero nisi non lorem. Aenean posuere justo a venenatis vulputate. Curabitur augue arcu, hendrerit ut efficitur sit amet, mattis quis ex. Proin feugiat lorem eu pretium pharetra. Sed accumsan rutrum erat eget pulvinar. Donec vitae nibh a nisi elementum hendrerit in non nunc.</p>
</P></div>
<div class="side">asdfas
</div>
</div>
</html>
Code: Select all
body {
background-image: url("space_bg.jpg");
background-color: #000000;
}
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.top {
position: fixed;
top: 0px;
left: 0px;
border-bottom: 1px solid #000;
margin: 0px;
width: 100%;
height: 400px;
padding: 0px;
z-index: 2;
display: inline-block;
}
.top-wrex {
background: url("WREX_LEFT.png") fixed no-repeat;
height: 400px;
width: 703px;
display: inline-block;
}
.top-title {
background-image: url("WREX_TITLE_RIGHT.PNG");
background-repeat: no-repeat;
background-attachment: fixed;
height: 400px;
width: 242px;
position: absolute;
left: 750px;
top: 0px;
float: left;
display: inline-block;
border: 5px solid white;
}
.bottom {
background-color: #FFFFFF;
position: absolute;
top: 400px;
left:0px;
width:100%;
height:100%;
z-index: 0;
}
.menu {
width:300px;
position: fixed;
top:410px;
}
.menu h1{
}
.menu li {
}
.menu ul {
}
.main{
position: absolute;
left: 310px;
width: 600px;
height: 100%;
z-index: 2;
}
.main h1{
font-size: 25px;
font-family: "Arial Black";
color: black;
font-weight: bold;
line-height: 53px;
height: 53px;
margin: 0px;
padding: 0px;
vertical-align: text-top;
}
.main p{
}
.main a{
}
.side {
width:300px;
position: absolute;
left: 920px;
top: 10px;
z-index: 2;
display: inline-block;
}
#versus {
position: relative;
top: 13px;
display: inline-block;
}