SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    content background not displaying or repeating

    I've been searching and trying several different variations of CSS to get my background for the content area to repeat vertically with no success.

    The code below is what I am currently using, which does not display the background at all. Using margin-bottom: -35000px; and padding-bottom: 35000px; was the closest in displaying the background, but of course a very long page. Using overflow: hidden; had varying affects in different browsers.

    Code CSS:
    #content_container
    {
    	background: url(content_bg.png) repeat-y left;
    	width: 940px;
    	height: 100%;
    	padding: 0;
    	margin: 0 auto;
    }
    #content1
    {
    	/*overflow: hidden;*/
    	/*margin-bottom: -35000px;*/
    	/*padding-bottom: 35000px;*/
    	width: 940px;
    	height: 100%;
    	padding-left: 26px;
    }

    Code HTML4Strict:
    <div id="content_container">
           <div id="content1">
    <!-- dynamic page content -->
           </div>
     </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You'd probably have to add

    Code:
    html, body {height: 100%;}
    to the CSS for anything to show up there, as otherwise, you are setting the heights of those divs to 100% of nothing.

    Make sure that the background image really is where the CSS file thinks it is, too (that is, in the same folder as the CSS file).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph.m, but no luck.

    Quote Originally Posted by ralph.m View Post
    Make sure that the background image really is where the CSS file thinks it is, too (that is, in the same folder as the CSS file).
    The background does display when using the extreme padding-bottom and margin-bottom numbers previously mentioned. I only wish that was the problem.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I actually tested that code before posting and it worked, but it may not work in all browsers. (I'm not very good at full heights). What browser are you using?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style type="text/css" media="all">
    html, body {height: 100%;}
    #content_container
    {
        background: url(content_bg.png) repeat-y left;
        width: 940px;
        height: 100%;
        padding: 0;
        margin: 0 auto;
    }
    #content1
    {
        width: 940px;
        height: 100%;
        padding-left: 26px;
    }
    </style>
    
    <script type="text/javascript" src=""> </script>
    	
    </head>
    
    <body>
    
    <div id="content_container">
           <div id="content1">
    <!-- dynamic page content -->
           </div>
     </div>
    </body>
    
    </html>
    Things will be different when you have some content on that page anyway. If you want the background image to span the full height of the window, I'd suggest putting it on the <body> element anyway. Then you can forget about all the 100% heights, which are tricky anyway.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've viewed it in FF3.6, IE8, Safari 5.0.4 and Chrome's latest (10.0...), and they all display the same.

    I'm using the following doctype.
    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">
    I'm adding this code as part of customizing X-Cart to my site design. I don't think there would be anything causing the issue.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It would be better to use a modern doctype, such as

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    or

    Code:
    <!DOCTYPE html>
    But anyway, the transitional doctype doesn't change this for me.

    Quote Originally Posted by spiderling View Post
    I've viewed it in ...
    Could I just check: view what in? If you copy the code I pasted above into a .html file, place it on your desktop (along with the background image) and open it in your browsers, what do you see? Doing that, the background works for me.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Could I just check: view what in? If you copy the code I pasted above into a .html file, place it on your desktop (along with the background image) and open it in your browsers, what do you see? Doing that, the background works for me.
    Sorry. I was referring to my page and viewing it in the different browsers mentioned. I did try and view your code in the browser, which worked.

    I'll have to see what of the X-Cart CSS may be causing the issue. I'm sure I'll be back.


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
  •