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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Shrinking Background

    This is my first post here, and my first time seeking help on a forum with a website, so please go easy on me.

    Here's my problem: Whenever the width of the page shrinks below 100%, and you scroll to the right, the background doesn't follow. I designed the background images to stretch with the page, but this is a nasty side effect. I suspect that the divs containing the background image shrink when you shrink the page, but I can't figure out a solution that doesn't destroy the rest of my page. Also, I have nested divs in the main content of the page, set up that way to achieve the drop shadow effect seen just below the navigation bar. I suspect this may have something to do with it as well.


    Here is the code controlling the background images.
    Code:
    #shadow{
    	background-image:url("images/bodyBGTop.gif");
    	background-repeat:repeat-x;
    	margin:0 auto;
    	padding-top:150px;
    }
    
    #body{
    	background-image:url("images/bodyBG.gif");
    	padding-bottom:48px;
    	
    }
    
    #bodyInner{
    	width:1020px;
    	margin:0 auto;
    }
    
    #bodyInner:after {
        clear:both;
        content:"";
        display:block;
        height:0;
        font-size:0;
    }
    Attached are the html and css files, as well as a picture of the problem. Here's the test link to my site: http://crazyoldmanthink.com/testsites/silvertutoring/

    Any help is much appreciated.
    Attached Thumbnails Attached Thumbnails Shrinking Background-problem.jpg   Shrinking Background-bg_span.jpg  
    Attached Files Attached Files
    Last edited by Veritas52; 08-14-2011 at 11:40 AM. Reason: Added image of background spanning the page.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Sorry, i dint get u. can u explain , actually wht u want??? can u share 2 screenshots 1st how it should look like and 2nd, how it is looking now...

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I added an image (the wide one) of the navigation bar and the center background spanning the page. The backgrounds span the page when it's stretched. But if you look at the other image, when the width of the page shrinks and you scroll, the background doesn't fill the page. Try the link I provided. Reduce the width of the page and scroll, and you'll see that the background doesn't cover. I hope that explains it.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Just set the width of palceholder and need help, as they can fit into their parent element.

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Setting a width for the placeholder might prevent the background from shrinking, but it creates a new problem. I want the backgrounds to span the page, but with a set width they become fixed, and won't expand with the page. I'm looking for a solution that satisfies both of those conditions.

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Then do 1 thing..... set background with body... and content in different element with limited width according to its parent.

  • #7
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did that, actually. Nested in my body divs is a content div with a set width. The divs with the background images have no set widths. Here's what it looks like:

    HTML:
    Code:
             <!-- Drop Shadow Background-->
             <div id="shadow">
                    <!-- Main Body Background-->
    		<div id="body">
                            <!--Content Container-->
    			<div id="bodyInner">
    
                                    <!-- Content Starts Here-->
    				<div id="content">
    					<div id="mainContent">
    						<div id="needHelp">
    							<h2>Need Help?</h2>
    							<p>
                                                                text				
    							</p>
    						</div>
    						<div id="splash">
    						</div>
    					</div>
    					<div id="homeWidgets">
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>

    And the CSS related to these divs:
    Code:
    #shadow{
    	background-image:url("images/bodyBGTop.gif");
    	background-repeat:repeat-x;
    	margin:0 auto;
    	padding-top:150px;
    }
    
    #body{
    	background-image:url("images/bodyBG.gif");
    	padding-bottom:48px;
    	
    }
    
    #bodyInner{
    	width:1020px;
    	margin:0 auto;
    }
    
    #bodyInner:after {
        clear:both;
        content:"";
        display:block;
        height:0;
        font-size:0;
    }
    
    #content{
    	margin-top:-150px;
    	position:relative;
    	float:left;
    	width:1020px;
    }

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    which background and where u want??

  • #9
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well thanks for the attempt to help me solve my problem. I've looked further into this issue, but it appears to be a limitation of the code. I don't think it's possible to have the spanning background elements without the shrinking when less than 100% width. I saw some websites by professional web designers who have the same problem, but skirt it by disabling horizontal scrolling. So I think that's what I'll do.


  •  

    Posting Permissions

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