Forum Moderators: not2easy
<html>
<head>
<style type="text/css">
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
img { border: 0; }
img#back
{
position: fixed;
left: 0px;
top: 50px;
width: 100%;
height: 35%;
z-index: -1;
}
div#content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<img id="back" src="http://www.example.com/shop/images/H3025.jpg
" alt="" title="" />
<p>How to make this image that fit browser window scrolling with page content</p>
<p>How to make this image that fit browser window scrolling with page content</p>
<p>How to make this image that fit browser window scrolling with page content</p>
<p>How to make this image that fit browser window scrolling with page content</p>
</body>
</html>[edited by: alt131 at 5:39 am (utc) on Sep 20, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>background-size</title>
<style type="text/css">
html,body {
height:100%;
margin:0;
background-image:url('http://www.webmasterworld.com/gfx/logo.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-size:100% 100%;
}
#container {
width:600px;
padding:30px;
border-right:2px solid #c4876e;
border-left:2px solid #c4876e;
margin:auto;
background-color:#000;
opacity:0.75;
filter:alpha(opacity=75);
font-family:arial,sans=serif;
font-size:20px;
}
#container p {
margin:0 0 20px 0;
color:#fff;
text-indent:20px;
}
#container p:first-letter {
font-family:'times new roman',serif;
font-size:40px;
color:#c4876e;
line-height:0.8;
text-shadow: #f00 0 0 10px;
}
</style>
</head>
<body>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida
sollicitudin molestie. Morbi venenatis justo vitae nisi aliquam pharetra.
Integer sed est at quam faucibus lobortis. Maecenas ut est vel risus
tincidunt consectetur. Suspendisse eget egestas nulla. Sed arcu odio,
faucibus suscipit suscipit eu, consectetur ac purus. Mauris vel velit
elit, vitae tempor neque. Suspendisse pretium nisi vel risus dapibus
dignissim eu quis ligula. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Proin vulputate dapibus
lectus nec lacinia. Phasellus suscipit dui at lectus cursus quis
pretium quam dictum. Fusce eget purus elit, sit amet aliquam nunc.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p><p>
Sed dignissim condimentum risus, eget interdum risus pretium non. Ut
condimentum luctus libero, tincidunt aliquam risus blandit id. Nullam
arcu dolor, consequat quis dignissim malesuada, venenatis et risus. Sed
feugiat elit sapien. Maecenas ipsum eros, ultricies interdum lobortis
quis, eleifend quis erat. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Sed quis tristique justo.
Vivamus mi tellus, laoreet id rhoncus non, mattis vehicula purus. Sed
ullamcorper nunc eget leo lobortis blandit. Pellentesque eu tellus in
tellus porta pharetra eu et lectus. In non tempor nibh.
</p><p>
Suspendisse potenti. Vivamus laoreet odio in orci porta consequat.
Vestibulum rutrum viverra sem, nec tincidunt nunc congue ut. Proin in
orci arcu. Pellentesque quam sem, rutrum a dapibus et, dignissim eget
ligula. Nullam vel ipsum in tellus mattis blandit et vitae elit.
Suspendisse potenti.
</p>
</div>
</body>
</html>
Gray panel is a Browser Window size Fixed area is suppose to be synchronized with a backgrounds and main content when scrolling all page but remain to be fixed to the browser window size ...I'm sure that makes sense to you ;) - but can you help me to understand by clarifying whether you want the image behind the "content" to be fixed (like Birdbrain's example, which does not scroll at all), or do you want it to act like a normal background-image and scroll with the content (like the <p>'s in the code sample you posted)? Plus, are you also wanting the image to be the full width and height of the browser window?
The trick is that ... and grey part (that is image) must be scrollable vertically.Although only grey part must be sticked to the browser window size in the same time.You see, to me "stickied to browser window" means it is fixed in place - and doesn't scroll, so those two sentences read to me that as saying the image should scroll and stay in the same place - at the same time.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My title</title>
<style type="text/css">
html {background-color: #aaa}
body {width:900px; margin:0 auto}
#header {
height:200px;
background: #bbb url(http://www.google.com/images/srpr/logo3w.png) no-repeat;
background-size: 100% 100%;
}
#maincontent {
height:1000px;
background: #ccc url(http://picasa.google.com/intl/en/images/logo.jpg) no-repeat;
background-size: 100% 100%;
}
#footer {
height:200px;
background: #ccc url(http://www.gstatic.com/picnik/20110920_174529_225.0-RC1/graphics/picnik_logo.gif?rel=20110920174529) no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="header"><h1>My header</h1></div>
<div id="maincontent"><h2>My Content Heading</h2>
<p>A para of content</p>
</div>
<div id="footer"><p>My footer</p></div>
</body>
</html>
