PDA

View Full Version : scroll field with set background


shadowrelm
02-01-2008, 10:38 PM
How can I make a scrollable page with a fixed background in dreamweaver? I dont want the background to move but I would like to be able to scroll through the pages content.

domedia
02-01-2008, 11:03 PM
use background-attachment: fixed in CSS.

Here's an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Back Attachment</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">
<style type="text/css">
<!--
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
background-image: url('http://images.google.com/intl/en_ALL/images/images_hp.gif');
background-attachment: fixed;
padding: 8px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div class="scroll">
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style="color: red;">This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
</div><!-- /#wrapper -->
</body>
</html>

shadowrelm
02-01-2008, 11:33 PM
Cool but how can I make it full screen? The site I am building is 800 by 600. when I go into the code and change the size it does change but it no longer works right. How to fix?