Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy How does this site collapse background from the left?? ahh!

    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!!

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Here's a similar script but with a paralax sort of effect. I saved the script from a posting here a while back.

    Code:
    <!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>

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    anybody? I feel like it's something simple but... you know how it goes.... lol

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •