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

    Question CSS Background help..intermediate programming

    Hey all, FlannelBeard here. Just joined these forums.
    Im in love with all programming and CSS, so I will help everyone out as much as I can.

    I have a problem with a site im trying to design. I unfortunately have to briefly explain before help can be given.

    Im developing a minamilistic style vertical site with no scroll bar. I have jquery animated links on the main page, so that when you click the text link, the background "scrolls" up to the anchor points that I set for each page.

    The backgrounds are as follows.
    Space (about us and info), Sky and Clouds (home and join us) and the beach below (more and contact us).

    6300px tall, 1050px width (background, broken into 3 parts (2100px height each))

    Im having troubles setting the background to center itself on my browser, and im trying to account for all resolution sizes.

    Code:
    /****** Background Elements ******/
    #wrapper{
    	width: 1680px;
    	height: 6300px;
    	position:absolute;
    }
    
    #container{
    	position:absolute;
    	max-width:900px; height:600px;	width: 900px;
    }
    
    
    /** Top **/
    #background-top{
    	width: 1680px; height: 2080px;
    	margin: 0 auto;
    	position:relative;	
    	background-image: url(../images/top.jpg);
    	background-position:center center;
    }
    
    /** Mid **/
    #background-mid{
    	width: 1680px;
    	height: 2080px;
    	margin: 0 auto;
    	position:relative;
    	background-image:url(../images/middle.jpg);
    	background-position:center center;
    	background-color: #000000;
    }
    
    /** Bot **/
    #background-bot{
    	width: 1680px; height: 2080px;
    	margin: 0 auto;
    	position:relative;	
    	background-image:url(../images/bottom.jpg);
    	background-position:center center;
    }
    The html...
    Code:
    <div id="wrapper"><!-- #wrapper --><!-- #top -->
    
    <div id="background-top"><!-- #top-->
    </div><!-- #top -->
    
    <div id="background-mid"><!-- #mid -->
    </div><!-- #mid -->
    
    <div id="background-bot"><!-- #bot -->
    </div><!-- #bot -->
    
    </div><!-- #wrapper -->
    The background wrapper wont "fit" to the browser window...there is a white space on the left and top of the background image. Not sure why...shows up on all browsers.

    I also want it (and have been testing) to shrink and resize the browser window, to see if the background will move with it, which is what I want.

    There is a circle (logo) on the main background, dead center of the site. I want this circle to move WITH my browser window and always stay centered when resized. This is crucial for the content box thats going over the center of the divs for content on the backgrounds.

    Can anyone help me out? Im going insane!

    Thank you so much for reading, please help me out quick! Redoing companies website and it needs to get done asap. Im a solid programmer but **** like this is infuriating haha!

    Thanks,
    -FlannelBeard, fellow coder, fellow friend, fellow beard.

  • #2
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fixed it. Source below for help.

    ENJOY!
    -Flannel

    CSS3
    Code:
    /******	Main Elements ******/
    body{
    	overflow: hidden; margin: 0px auto;
    	color: #FFF;
    	font-family:Verdana, Geneva, sans-serif;	
    }
    
    /** Links **/
    a:link{
    	color:#FFF;
    }
    
    a:visited{
    		
    }
    
    a:hover{
    	
    }
    
    /****** CSS3 ******/
    .contact-box{
    color: #000; padding: 10px;
    width: 400px; height: 600px;
    position:absolute; background-image: url(../images/whiteblock.png);
    background-repeat: repeat;
    /** Shadow **/
    -webkit-box-shadow: 2px 0px 10px #ffffff;
    -moz-box-shadow: 2px 0px 10px #ffffff;
    box-shadow: 2px 0px 10px #ffffff;
    /** Radius **/
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 0px;
    }
    
    #home-nav{
    	
    }
    
    
    /****** Background Elements ******/
    
    #wrapper{
    	width: 1680px; height: 6300px;
    	right: 50%;
    	position: absolute;
    }
    
    /** Top **/
    #background-top{
    	width: 1680px; height: 2080px;
    	left:50%; position:relative;	
    	background-image: url(../images/top.jpg);
    	background-position:center center;
    }
    
    /** Mid **/
    #background-mid{
    	width: 1680px;
    	height: 2080px;
    	left:50%; position:relative;	
    	background-image:url(../images/middle.jpg);
    	background-position:center center;
    	background-color: #000000;
    }
    
    /** Bot **/
    #background-bot{
    	width: 1680px; height: 2080px;
    	left:50%; position:relative;		
    	background-image:url(../images/bottom.jpg);
    	background-position:center center;
    }
    HTML
    Code:
    <body onload="goToAnchor();">>
    
    <div id="wrapper"><!-- #wrapper -->
    
    <div id="background-top"><!-- #top -->
    </div><!-- #top -->
    
    <div id="background-mid"><!-- #mid -->
    </div><!-- #mid -->
    
    <div id="background-bot"><!-- #bot -->
    <div id="container">
    </div>
    </div><!-- #bot -->
    
    </div><!-- #wrapper -->
    
    </body


  •  

    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
    •