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 11 of 11
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Background will not scroll with center content

    Please see my portfolio site www.begraphics.com. When viewing on smaller screens and the need to scroll down the background will not scroll with the central content, meaning everything becomes not in line. The css for the home background image is:

    Code:
    .content1 {
    	width:100%;
    	min-width:1000px;
    	background:url(../images/background_home.png) no-repeat;
    	background-attachment:scroll;
    	background-position:center;
    	margin:0 auto 0 auto;
    	height:706px;
    	z-index:10;
    	overflow:hidden;
    }
    Any idea how to make this work?

    Thanks

    Eddie

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    For me, the background scrolls as you scroll down the page.

    Is this the behaviour you're after?

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts
    So the middle content is 1400px... anything wider than this has issues see reduced size image

    http://www.begraphics.com/temp/scrollissues.jpg

    Cheers

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    What browser does that screen shot come from?

    In IE8, Firefox22, and Chrome22, I see only the logo is out of alignment.:


  • #5
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Im using chrome 22 and tested on ie10, firefox... doesn't matter the background outside the 1400px content middle stays static. I have to use the mouse middle scroll as my screen is too big to produce scroll bar although firefox does see attached. My screen size: W: 1920 H 1080



    Cheers

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    You need to apply background-attachment:scroll; to the body tag I think.

  • #7
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This didn't work either :-( full body css



    body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background-color:#f0f0f0;
    background:url(../images/bg_all.png) repeat-x;
    background-attachment:scroll;
    overflow:hidden!important;
    }


    Cheers

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    I don't see the background-attachment:scroll; for the body tag in any CSS. In http://www.begraphics.com/css/style.css I see:

    Code:
    body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    	background-color:#f0f0f0;
    	background:url(../images/bg_all.png) repeat-x;
    	overflow:hidden!important;
    }
    I've cleared my cache.

  • #9
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts
    sorry I didn't upload... making changes to my local. its there now

    Cheers

  • #10
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    Stumped.

  • #11
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yes as am I hence why I'm on here haha


  •  

    Posting Permissions

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