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
    Regular Coder
    Join Date
    Feb 2007
    Posts
    218
    Thanks
    25
    Thanked 1 Time in 1 Post

    background image from top to bottom ?

    I've got a small problem with a div. This div named 'contain' should display an image 'bg.jpg' in the full length of the html page. Instead it only displays the picture for only 70% of the pages length. With length I mean from the top to the bottom.

    How can I alter my coding so that the image will be displayed along the full 100% of the div named 'contain' ?

    Ps. I've excluded some plain text, otherwise the coding would be to large to show.

    Code:
    body{
    height: 100%; 
    margin:0 auto; 
    text-align: center;
    background:#fff;
    font-family: 'American Typewriter', Georgia, sans-serif;
    font-size: 17px;
    }
    
    .contain{
    margin:0 auto;text-align:center;width:900px;min-height: 100%;
    background-image: url('bg.jpg');
    }
    Code:
    <div id="container">
    	<div class="contain">
    		<div style="text-align:left;width:300px;float:left;">
    		 <div style="margin-top:42px;margin-left:50px;"><a href="http://www.devertaalsite.nl"><img src="logo.png" style="border:0px;" ></a></div>
    		  <div class="leftcolumn">
    			<div style="width:210px;">
     
    
    			 </div>
    			</div>
    		</div>
     
    <div style="text-align:left;width:550px;float:left;">
    	<div style="margin-top:55px;margin-left:50px;">
     
    
     
    	</div>
    </div>		<div style="clear:both;width:900px;">&nbsp;</div>
    		<div class="footer" >&copy; 2011</div>	</div>
    </div>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Probably going to need to show all your html and css code. If you have a live link to your site, that would be better.

    What does the image look like? Can it be repeated?
    Teed

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Add following code in ur current CSS and try

    Code:
    html {
    height:100%;
    }
    .contain {
    min-height:100%;
    height:auto !important;
    height:100%;
    }


  •  

    Posting Permissions

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