SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Stretch background image/color out of the div

    i have a 960 container.

    http://moneyzzsharma.site90.net/

    what i had done:

    container{
    1st outerwrapper(named s1) for 1st div and then 1st div is given width:960 and margin center. Outerwrapper is given margin:0px -300px;

    this same thing is applied to the 2nd outerwrapper(named "s2")(the one having FOODIE logo).

    ALSO HTML{OVERFLOW-X:HIDDEN;}

    it works fine on pc which is having more than 960px width. But on Cellphone(NOT IN OPERA BROWSER) extra right portion is seen. what should i do to make it correct?
    coding of 1stouterwrapper(s1) and 2nd outer wrapper(s2) is :
    Code:
    .s1{
    z-index:-4;
    margin:0px -300px;
    height:55px;
    background-image:url(images/topbg.png);
    
    
    }
    
    .s2{
    z-index:-5;
    margin:-10px -300px;
    height:140px;
    background-image:url(images/bluebg.jpg);
    
    }
    darkbluecontent is the inner container of s1
    and lightbluecontent is the inner container of s2

    their coding are:
    Code:
    .darkbluecontent{
    margin:0 auto;
    position:relative;
    top:10px;
    width:960px;
    height:32px;
    }
    
    .lightbluecontent{
    margin:0px auto;
    	clear:left;
    	position:relative;
    top:4px;
    width:960px;
    height:136px;
    }
    
    body{
    
    width:100%;
    	margin:0;
    	padding:0;
    	position:relative;
    background-image:url(images/wholebg.jpg);
    z-index:0;
    /*z-index:-4; */
    
    }
    
    html{
    
    overflow-x:hidden;
    }
    Help me out please, i am badly stuck

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Prob the overflow-x if I understand you. Try just overflow

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Prob the overflow-x if I understand you. Try just overflow
    it will never work coz if
    html{
    overflow:hidden}

    will be used then no scroll option will come and its not of any use.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    For this kind of layout, you are better off (IMO) just creating full width bands as described here:

    http://pageaffairs.com/code-archive/...d-columns.html

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    For this kind of layout, you are better off (IMO) just creating full width bands as described here:

    http://pageaffairs.com/code-archive/...d-columns.html
    Thanks Ralph


Tags for this Thread

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
  •