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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts

    section background not displaying

    Hi,

    See url: http://backstageweb.net/newsite/

    The home section's background image isn't displaying and I don't know why. The other 3 sections bkgrnds display correctly. (the sections are the navbar buttons)

    Code:
    .section { min-height: 800px; padding: 40px; }  /* ---scroll applies to ALL sections---*/
    	
    .section#home {background-image:url(../images/bg_audience.jpg) bottom center fixed no-repeat;}
    .section#portfolio {background:url(../images/bg_portfolio.jpg) top center fixed no-repeat;}
    .section#terms {background:url(../images/bg_terms.jpg) top center fixed no-repeat;}
    .section#contact {background:url(../images/bg_contact.jpg) top center fixed no-repeat;}
    
    
    <div id="wrapper">
    	<div class="section" id="home">
    	    <div class="content">
    		<p>Lorem ipsum...</p>
    	    </div><!--end 'content'-->
    	 </div><!--end 'home' section-->
    Can anyone shed some light?

    Thank you!

    John

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,757
    Thanks
    23
    Thanked 546 Times in 545 Posts
    I made these changes in the css file and it works for me. Notice the positioning on the #home, it's center center to get a better view of image.
    Code:
    #home {background:url('http://backstageweb.net/newsite/images/bg_audience.jpg') center center fixed no-repeat;}
    #portfolio {background:url('http://backstageweb.net/newsite/images/bg_portfolio.jpg') top center fixed no-repeat;}
    #terms {background:url('http://backstageweb.net/newsite/images/bg_terms.jpg') top center fixed no-repeat;}
    #contact {background:url('http://backstageweb.net/newsite/images/bg_contact.jpg') top center fixed no-repeat;}
    Evolution - The non-random survival of random variants.

  • Users who have thanked sunfighter for this post:

    johndove (04-19-2013)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Code:
    .section#home {background-image:url(../images/bg_audience.jpg) bottom center fixed no-repeat;}
    That should be background, not background-image.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    johndove (04-19-2013)

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thank you, guys! Follow up question: Is there an easy way to make the background image scale to the viewport? (at least the width?)

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,757
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Code:
    #home {background:url('http://backstageweb.net/newsite/images/bg_audience.jpg') center center fixed no-repeat;background-size: 100% 800px;color: White;}
    Evolution - The non-random survival of random variants.

  • Users who have thanked sunfighter for this post:

    johndove (04-19-2013)

  • #6
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thank you, thank you, THANK YOU!


  •  

    Posting Permissions

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