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
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question CSS background images problem

    I am trying to display a top and bottom background image within css. This is my css (basic for a test):

    Code:
    /*  basics */
    * {margin:0;padding:0;}
    
    /* structure */
    body{
    	margin: 0 auto;
    	padding: 0px;
    	text-align:center;
    	background: #5d4c3a url(img/urbandarker.jpg) no-repeat top center;
    }
    
    #bg{
    	background:url(img/urbandark_btm.jpg) repeat-y bottom center;
    }
    This the the html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <html>
    <body>
    <div id="bg">
    	<p>Why is the background at the top when it is listed as "background:url(img/urbandark_btm.jpg) repeat-y bottom center;"</p>
    </div>
    </body>
    </html>
    Why is the div "bg" background showing above the body background?

    You can see the demo here:
    http://dev.upliftingdesign.com/test/

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Are you trying to make a sticky footer?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No, I'm trying to tile the bottom image so that when content extends beyond the size of the primary background image, it doesn't fall onto the body's brown background.

  • #4
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ultimately, this is what I am trying to fix:


  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mwbarker,
    #bg image is on top of the body image because that's how the webpage is stacked.

    If #bg looks like it's behaving in a way that will fix your problem, try swapping the images around so they are stacked the other way.

    If #bg is not going to solve your content overflow, you may want to look into some different images. A top and bottom image with a Y-repeated slice for the middle might work better since it could expand as far as needed for longer content.
    You might also try a scrollbar instead of letting the content overflow.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    If #bg looks like it's behaving in a way that will fix your problem, try swapping the images around so they are stacked the other way.
    I swore I tried that already, but when I swapped the images again, it worked fine. Thanks for the help!


  •  

    Posting Permissions

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