SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Layering Backgrounds at 100% Height

    I've made a simplified version of the problem I'm having (code below.)

    Basically, I want to have a repeating texture for the main page background, but with a wide white strip going down the middle (in this case as the background of a wrapper div.) When I try this (as below) however, it works fine until there is enough content (or the browser window is short enouh) that the page scrolls in which case the white strip dissapears under content scrolled into view.

    Any ideas?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>background test</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<style type="text/css">
    		
    			html, body {
    				margin: 0;
    				padding: 0;
    				height: 100%;
    			}
    			
    			body {
    				background: #ccc url(bg.jpg);
    			}
    			
    			#wrapper {
    				width: 758px;
    				height: 100%;
    				margin: 0 auto;
    				background: #fff;
    			}
    			
    			#content {
    				height: 400px;
    				width: 400px;
    				border: 1px dotted #900;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="wrapper">
    			<div id="content">
    				make browser window shorter than this box to scroll
    			</div>
    		</div>
    	</body>
    </html>

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Not enough to go on? did you use html,body{height:100%;} ?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    	<title>background test</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0;/* no margins body */
    	padding:0;/* no padding body */
    	height:100%;
    	width:100%;
    	}
    	body{background:#ff8c00;}
    	
    	div{text-align:left;/* to get text back to the left*/}
    			
    	#wrapper{
    	background: url(3.jpg) 50% 0 repeat-y;
    	width: 758px;
    	margin: 0 auto;
    	/*background:#eee8aa;*/
    	}
    	* html #wrapper{height:100%;}/* IE */
    	head+body #wrapper{min-height:100%;}/* FF NS Moz OP */
    			
    	#content{
    	background: url(3.jpg) 50% 0 repeat-y;
    	height: 400px;
    	width: 400px;
    	border: 1px dotted #900;
    	}
    			
    		</style>
    	</head>
    	<body>
    		<div id="wrapper">
    			<div id="content">
    				make browser window shorter than this box to scroll
    			</div>
    		</div>
    	</body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    May 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code you sent works, but to achieve the opposite of what I'm trying to do. Your example has a strip of background tile going down the middle of the page with solid color on the outside. This I am able to do without problems, it's having the background tile on the outside and white (or another texture) on the inside that isn't working. Let me demonstrate with pictures.


    This is what the page looks like (which is how I want it to look) when the window is large enough that there isn't any scrolling :


    This, however, is how it looks when you scroll:


    You'll notice that the white stops where the end of the window was before the page was scrolled and any more of the page that is scrolled into view just shows the background tile. From what I can tell this is because even with the wrapper, the body tag, and the html tag set to 100% height, this still only represents 100% of the browser window height, not the actual height of the page content. This is what I'm looking for a way around (if possible.)

    Any thoughts?

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    I am on W XP IE6 FF Moz NS OP

    * html #wrapper{height:100%;}/* IE */
    head+body #wrapper{min-height:100%;}/* FF NS Moz OP */

  5. #5
    SitePoint Member
    Join Date
    May 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that snippet worked once I realized I needed to remove the "height: 100%" from the wrapper after adding that in.

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yeh i guest that from this

    From what I can tell this is because even with the wrapper, the body tag, and the html tag set to 100% height, this still only represents 100%


Bookmarks

Posting Permissions

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