07.8 Fix Divs in place (so they ignore the scrollbar)
Details
This code fixes the flag div and background in place
<!DOCTYPE html>
<html>
<head>
<style>
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
padding:0px;
margin:0px;
}
.mybackground {
position:fixed;
background-image:url('http://www.iskill.co.uk/teach/images/bob.jpg');
width:100%;
height:100%;
top:0px;
z-index:-1;
}
.mylyrics {
color: white;
}
.myflag {
position:absolute;
top:0;
right:0;
width:256px;
height:192px;
background-image:url('http://www.iskill.co.uk/teach/images/bobsflag.jpg');
position:fixed;
}
</style>
</head>
<body>
<div class="mybackground"></div>
<div class="mylyrics">
<p>One Love! One Heart!</p>
<p>Let's get together and feel all right.</p>
<p>Hear the children cryin' (One Love!);</p>
<p>Hear the children cryin' (One Heart!),</p>
<p>Sayin': give thanks and praise to the Lord and I will feel all right;</p>
<p>Sayin': let's get together and feel all right. Wo wo-wo wo-wo!</p>
<p>One Love! One Heart!</p>
<p>Let's get together and feel all right.</p>
<p>Hear the children cryin' (One Love!);</p>
<p>Hear the children cryin' (One Heart!),</p>
<p>Sayin': give thanks and praise to the Lord and I will feel all right;</p>
<p>Sayin': let's get together and feel all right. Wo wo-wo wo-wo!</p>
<p>One Love! One Heart!</p>
<p>Let's get together and feel all right.</p>
<p>Hear the children cryin' (One Love!);</p>
<p>Hear the children cryin' (One Heart!),</p>
<p>Sayin': give thanks and praise to the Lord and I will feel all right;</p>
<p>Sayin': let's get together and feel all right. Wo wo-wo wo-wo!</p>
</div>
<div class="myflag">Bob</div>
</body>
</html>