...

View Full Version : How does this site collapse background from the left?? ahh!



ryan444
05-22-2009, 02:43 AM
I've been trying all day to figure this out all day. I'm designing a website and have something similar to the tv (with rays) on this website: http://newteevee.com. You'll notcie when you're on this website and collapse the browser that they've done something with the background (?) to allow it to dissapear from the left AND the right until it hits the design on the left margin (when usually design dissapears from JUST the right. They've obviously done this to keep the rays coming from the TV visable if at all possible.

Any idea how to do this? I'm basically trying to replicate this aspect of the design and page. I've been at this all day stuck!! :confused:

TinyScript
05-22-2009, 02:50 AM
Here's a similar script but with a paralax sort of effect. I saved the script from a posting here a while back.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
background:#fff;
}
#bg{
background: transparent url(http://dynodealz.com/q/bg.png) 20% 0 repeat-x;
margin: 0;
padding: 0;
width: 100%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
#bg1{
background: transparent url(http://dynodealz.com/q/bg1.png) 35% 0 repeat-x;
margin: 0;
padding: 0;
width: 100%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
#bg2{
background: transparent url(http://dynodealz.com/q/bg2.png) repeat-x; background-position:-200px 0px;
margin: 0;
padding: 0;
width: 100%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
#content {

padding-top: 400px;
width: 980px;
position:fixed
left:0;
}
</style>
</head>

<body>
<div id="bg"></div>

<div id="bg1"></div>
<div id="bg2"></div>
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec sem. Integer porta bibendum ipsum. Vivamus vel sapien. Donec bibendum, diam ac pellentesque vehicula, eros lorem pharetra ante, non consectetur arcu arcu id felis. Sed sed ipsum. Sed accumsan, augue vitae aliquet gravida, velit magna molestie sem, quis tempus orci neque et leo. Phasellus id massa. Suspendisse metus nunc, semper sed, tristique sed, ultrices sed, libero. Pellentesque tincidunt nisl sit amet est. Cras rutrum auctor magna. Proin sapien. Donec a odio.Sed sem. Quisque accumsan dignissim nisl. Donec bibendum, enim in suscipit accumsan, ipsum orci cursus urna, dictum iaculis nibh velit id eros. Phasellus porta, libero ut iaculis suscipit, metus dolor viverra est, ac interdum orci magna quis sem. Maecenas auctor pellentesque ligula. Integer ac est vel augue aliquet tincidunt. Phasellus quis orci. Quisque posuere sed magna. Mauris urna nunc, tempor eget, ultrices sed, elementum et, lectus. Fusce mattis convallis elit. In hac habitasse platea dictumst.</p>
</div>
</div>
</body>

</html>

ryan444
05-22-2009, 03:12 AM
I guess my question is more along the lines of how should I structure the page? It seems to me that the rays, TV and background are all on one background layer and something in the code is allowing that whole background layer to be able to disappear from the left to a certain defined margin.

ryan444
05-22-2009, 03:46 AM
anybody? I feel like it's something simple but... you know how it goes.... lol:D

_Aerospace_Eng_
05-22-2009, 07:30 AM
All they are doing is using background positioning to center the background image. When the browser is resized the background image remains centered. This why it appears to be "cut" off. The content part of the site has a fixed width and it uses margin:auto; to center it in the browser.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum