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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background repeat-y

    Hi! I have two backgrounds, but "background2.gif" (which I put on repeat-y) stops repeating if my page is longer than my browser and I scroll down. This is because I have this CSS:

    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    html {
    	background-image: url('../images/background1.gif');
    }
    
    html, body{
    	height: 100%;
    }
    
    body {
    	background: url('../images/background2.gif') repeat-y center;
    	min-height: 100%;
    	font-size: 13px;
    	color: #4a4a4a;
    	line-height: 25px;
    }
    
    #pagewrapper {
    	margin: 0 auto -92px;
    	min-height: 100%;
    	height: 100%;
    	height: auto !important;
    }
    
    #content {
    	margin: 0 auto;
    	padding: 5px 35px 5px 35px;
    	width: 720px;
    	min-height: 62%;
    	position: relative;
    	overflow: hidden;
    	/*background: #ffffff;*/
    	zoom: 1;
    
    #footercontainer {
    	height: 92px;
    }
    
    footer {
    	margin: 0 auto;
    	width: 100%;
    	height: 92px;
    	background: url('../images/footer/footerbg.png') repeat-x;
    	background-position: left bottom;
    }
    }
    To be more specific, because of the
    "html, body{
    height: 100%;
    }"
    part.

    If I change this to min-height, everything works perfectly in Opera, but in other browsers, such as Firefox, my footer doesn't work anymore (it won't stay at the bottom).

    How can I make the second background repeat at y through my entire page and keep the footer down?

    Oh, and this is my HTML part:
    Code:
    <?php session_start(); ?>
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="utf-8">
    	<title>title</title>
    	<link rel="stylesheet" href="stylesheet.css" />
    </head>
    
    <body>
    
    	<div id="pagewrapper">
    	
    		<div id="loginblock">
    			<?php include_once('includes/loginblock.php'); ?>
    		</div>
    		
    		<header>
    			<?php include_once('includes/header.php'); ?>
    		</header>
    		
    		<div id="content">
    			text
    		</div><!-- end content -->
    		
    		<div id="footercontainer">
    		</div>
    	</div><!-- end pagewrapper -->
    	
    	<footer>
    		<?php include_once('includes/footer.php'); ?>	
    	</footer>
    
    </body>
    
    </html>

  • #2
    New Coder
    Join Date
    Apr 2012
    Posts
    44
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Try this:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>	
    	<title>title</title>
        
    	<style type="text/css">
    		#bg_top{	
    			background-position:center top;
    			background-repeat:repeat-y;
    			background-color:#f00;
    			}
    	
    		#bg_bottom{				
    			height: 400px;
    			background-position:center bottom;
    			background-repeat:no-repeat;
    			background-color:#000;
    			}
    	</style>
    </head>
    
    <body>
    	<div id="bg_top">
       Hellow World!!!!<br />
       Hellow World!!!!<br />
       Hellow World!!!!<br />
       Hellow World!!!!<br />
       Hellow World!!!!<br />
       Hellow World!!!!<br />
       Hellow World!!!!<br />
       Hellow World!!!!<br />
       Hellow World!!!!<br />
       Hellow World!!!!<br /> 
        </div>
    <div id="bg_bottom"></div>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry, but I really don't understand why you would put a background in divs since my backgrounds need to keep repeating, not matter what the height of the divs are?


  •  

    Posting Permissions

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