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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background Image in Div not repeating

    Hello, I'm currently attempting to write a layout for my blog. However, I am running into problems when attempting to have a background image repeat in the background div. Basically, I have a container that holds all my divs. I also have a content div which basically holds the stuff inside the container(the blog div and my nav div). However, when trying to get the image on my content div to repeat it doesn't work. Here is my code. I also made it inline css right now for the sake of testing. One thing I also tried doing was creating a skeleton of my current layout with the divs and no content in them and I ran into the same problem. Any help would be very much appreciated. Thanks

    Code:
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title><$BlogTitle$></title>
    <$BlogMetaData$>
    <!--<link rel="stylesheet" href="http://www.freewebs.com/huntards/newDesign/index.css" type="text/css">-->
    <style type="text/css">
    
    body{
    	background-color: #000000;
    	
    }
    
    #container{
    	margin: 0 auto;
    	margin-left:auto;
    	margin-right:auto;
    	width: 800px;	
    	overflow:auto;
    }
    
    #contentContainer{
    	background-image: url('http://www.freewebs.com/huntards/background.jpg'); 
    	background-repeat: repeat; 
    }
    
    #blog{
    	overflow:auto;
    	float:left;
    	width: 67%;
    	margin-left: 3px;
    	font-family: verdana;
    	font-size: 9pt;
    	color: #FFE8D3;
    	background-color: transparent;
    }
    
    #nav{
    	overflow: auto;
    	float: right;
    	text-align: center;
    	font-family: verdana;
    	font-size: 9pt;
    	color: #FFE8D3;
    	background-color: transparent;
    }
    
    h1, h3 {
    	color: #FFFFFF;
    	font-family: tahoma; 
    	font-size: 9pt;
    }
    h2, h4{
    	color: #FED500;
    	font-family: tahoma; 
    	font-size: 10pt;
    }
    
    .navHeader{
    	font-family: verdana;
    	font-size: 11pt;
    	font-variant:small-caps;
    	color: #FED500;
    	font-weight: bold;
    }
    </style>
    
    </head>
    
    
    <body>
    
    <div id="container"><!--Start of container-->
    	
        <div id="header">
        	<img src="http://www1.freewebs.com/huntards/header.jpg" />
        </div>
        
       	<div id="contentContainer"><!--Start if ContentContainer-->
            <div id="blog">
                <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="450" 	height="80">
                <param name="movie" value="http://wow.ukgl.co.uk/wow.swf?s=US&r=jaedenar&n=jakrathal" />
                <param name="quality" value="high" />
                <embed src="http://wow.ukgl.co.uk/wow.swf?s=US&r=jaedenar&n=jakrathal" quality="high" pluginspage=      "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="450" height="80"></embed>
              </object>
                                                    
              
              <Blogger>
              
              <BlogDateHeader>
              <h2 class="date-header"><$BlogDateHeaderDate$></h2>
              </BlogDateHeader>
              
              <div class="post"><a name="<$BlogItemNumber$>"></a>
              <BlogItemTitle>
              <h3 class="post-title">
              <a href="<$BlogItemUrl$>" title="external link">
              <BlogItemUrl></BlogItemUrl>
              <$BlogItemTitle$>
              <BlogItemUrl></BlogItemUrl>
              </a>
              </h3>
              </BlogItemTitle>
              <div class="post-body">
              <div>
              <$BlogItemBody$>
              </div>
              </div>
                  
              <p class="post-footer">
              Posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>::
              <MainOrArchivePage><BlogItemCommentsEnabled>
              
              <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> Thoughts</a>::
              </BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
              <a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">Links to this post</a>::
              </BlogItemBacklinksEnabled>
              </MainOrArchivePage>  <$BlogItemControl$>
              </p>
              <p style="text-align: center"><img src="http://www.freewebs.com/huntards/bow_divider.jpg"></p>
              </div>
              
              
              <ItemPage>
              <div id="comments">
              <BlogItemCommentsEnabled><a name="comments"></a>
              <h4><$BlogItemCommentCount$> Comments:</h4>
              <dl id="comments-block">
              <BlogItemComments>
              <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
              <$BlogCommentAuthor$> said...
              </dt>
              <dd class="comment-body">
              
              <p><$BlogCommentBody$></p>
              </dd>
              <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
              <$BlogCommentDeleteIcon$>
              </dd>
              </BlogItemComments>
              </dl>
              <p class="comment-timestamp">
              <$BlogItemCreate$>
              </p>
              </BlogItemCommentsEnabled>	    
              <BlogItemBacklinksEnabled>
              <a name="links"></a><h4>Links to this post:</h4>
              <dl id="comments-block">
              <BlogItemBacklinks>
              <dt class="comment-title">
              <$BlogBacklinkControl$>
              <a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
              </dt>
              <dd class="comment-body"><$BlogBacklinkSnippet$>
              <br />
              <span class="comment-poster">
              <em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
              </span>
              </dd>
              </BlogItemBacklinks>
              </dl>
              <p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
              </BlogItemBacklinksEnabled>
              <p class="comment-timestamp">
              <a href="<$BlogURL$>">&lt;&lt; Home</a>
              </p>
              </div>
              </ItemPage>
              </Blogger>
              
              <div class='adsense' style='text-align:center; padding: 0px 3px 0.5em 3px;'><!--Start of adsense-->
                  <script type="text/javascript"><!--
                google_ad_client="pub-4105046216107705";
                google_ad_host="pub-1556223355139109";
                google_ad_width=468;
                google_ad_height=60;
                google_ad_format="468x60_as";
                google_ad_type="text";
                google_color_border="395D39";
                google_color_bg="395D39";
                google_color_link="FED500";
                google_color_url="008000";
                google_color_text="FFE8D3";
                //--></script>
                <script type="text/javascript"
                  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
              </div><!--End of adsense-->
            </div>
            
            <div id="nav">
                <div class="navHeader"><$BlogTitle$></div>
                  <br>
                  <$BlogDescription$>
                  <p>
                  
                   <span class="navHeader">About Me</span>
                   <br>
                   <b>Name</b>::<$BlogOwnerNickname$><br>
                   <b>Main</b>::<a class="anav" href="http://www.wowarmory.com/character-sheet.xml?r=Jaedenar&n=Jakrathal">Jakrathal - Troll Hunter</a>
                   <br><b>Battle.Net Name</b>:: Mn3MoN1C
                   <p>
                   
                   <span class="navHeader">Recent Posts</span>
                   <br>
                   <BloggerPreviousItems>
                   <a class="anav" href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a><br>
                   </BloggerPreviousItems></p>
                   <p>
                   
                  
                  <span class="navHeader">WoW Linkage</span>
                  <br>
                  <a class="anav" href="http://www.wowinsider.com">WOW Insider</a><br>
                  <a class="anav" href="http://www.bigredkitty.blogspot.com">Big Red Kitty</a><br>
                  <a class="anav" href="http://petopia.brashendeavors.net">Petopia</a><br>
                  <p>
                  
                  <span class="navHeader">Non-WoW Linkage</span>
                  <br>
                  <a class="anav" href="http://www.impact2cool.cjb.net">Impact2cool</a><br>
                  <a class="anav" href="http://www.assboards.cjb.net">Alliance Boards</a><br>
                  <p>
                  
                  
                  <span class="navHeader">Credits</span>
                  <br>
                  <a class="anav" href="http://bloggertemplatesbycaz.blogspot.com/" target="_blank">Template By Caz</a><br>
                  Graphics by <a class="anav" href="http://www.impact2cool.cjb.net" target=_blank>Impact</a><br>
                  <p>
                  
                  <span class="navHeader">Visitors</span>
                  <br>
                  Put Code Here
                  <p>
                  
                  <span class="navHeader">Archives</span>
                   <br>
                   <BloggerArchives>
                   <a class="anav" href='<$BlogArchiveURL$>'><$BlogArchiveName$></a><br>
                   </BloggerArchives></p>
                   </p></p></p></p></p>
            </div>
    	</div><!--End of ContentContainer-->
        
    
    </div><!--End of Container-->
    
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    My guess would be because Nav and Blog are floated, #contentContainer doesn't have any height so the background image isn't showing.

    You should clear those two floats before you close out contentContainer, which should show the background when the container expands to its floated contents.

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm kind of confused when you say I should clear the two floats. Could you please provide an example of code? Thank you

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Sure, here's a little example:

    Code:
    <div id="wrapper">
       <div id="left-nav">
           ....
       </div>
       </div id="content">
           ....
       </div>
    </div>
    Now let's say that we give #wrapper a background color of red, and float #left-nav left, and float #content right.

    We view our page expecting to see #left-nav and #content beside each other, which they are, but there's no red background? Why?

    Well, this has to do with "normal flow" which is the default positioning the browser renders elements. If we didn't float #left-nav and #content they'd never be able to be beside each other, because by default they're block-level elements and render on top of each other.

    By floating the two inner divs, we take them out of normal flow which allows them to position beside each other--this is the effect we want, but the problem is now since both of #wrappers content divs are floated there's technically nothing contained inside of it in normal flow. This means that when #wrapper goes to compute its height it thinks its height is zero, because there's nothing inside of it in normal flow. That's the reason why the red background would not show in this example, and in your case as well.

    "clear" is a CSS property that handles this problem. When you clear floats, it forces the containing divs to expand its size to include the size of its floats. You can accomplish this by the following:

    Code:
    <div id="wrapper">
       <div id="left-nav">
           ....
       </div>
       </div id="content">
           ....
       </div>
    
       <div style="clear: both;"> </div>
    </div>
    Now, because the two floats are cleared (you can clear left, right, or both) #wrapper will expand its height to include the height of #left-nav and #content, and because #wrapper has a height now the red background is shown.

    This crude ascii drawing describes this phenomenon visually:

    Without clearing:
    Code:
    +--(#wrapper)---------------------------------+
    |   +-----------+    +--------------------+   |
    +---|           |----|                    |---+
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        | #left-nav |    |      #content      |
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        +-----------+    +--------------------+
    With clearing:

    Code:
    +--(#wrapper)---------------------------------+
    |   +-----------+    +--------------------+   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   | #left-nav |    |      #content      |   |  
    |   |           |    |                    |   |  
    |   |           |    |                    |   | 
    |   |           |    |                    |   |
    |   |           |    |                    |   | 
    |   |           |    |                    |   |
    |   |           |    |                    |   |  
    |   +-----------+    +--------------------+   |
    |                                             |
    |   +---clear: both-----------------------+   |
    |                                             |
    +---------------------------------------------+
    Last edited by vtjustinb; 10-05-2007 at 05:25 PM.

  • The Following 3 Users Say Thank You to vtjustinb For This Useful Post:

    Mn3MoN1C (10-05-2007), rmedek (10-06-2007), toothmkr57 (10-06-2007)

  • #5
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much. I really appreciate the thorough explanation of the clear. I didn't understand it before, but now I have a better understanding.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    That is the best diagram and explanation of clearing floats I have ever seen, ASCII or not.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Nice one vtjustinb,
    This explanation should be listed under a sticky (IMO)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by abduraooft View Post
    Nice one vtjustinb,
    This explanation should be listed under a sticky (IMO)
    Done!

  • #9
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    WOW that is a great explanation! good visual to back it up. I have a question to take it one step further. Taking the same scenario, if we clear:left that would extend the height of the wrapper beyond the left-nav and allow the content div to flow over and beyond the wrapper?

  • #10
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by toothmkr57 View Post
    WOW that is a great explanation! good visual to back it up. I have a question to take it one step further. Taking the same scenario, if we clear:left that would extend the height of the wrapper beyond the left-nav and allow the content div to flow over and beyond the wrapper?
    Thanks for the kudos guys!

    Yes toothmkr, that's exactly what would happen. When you specify a specific direction on the clear (such as left, or right), it only considers elements that are floated in that direction. In your example, if the #left-nav was shorter than #content and you cleared left, then #wrapper would only expand to cover #left-nav.

    More ascii goodness:

    Code:
    +--(#wrapper)---------------------------------+
    |   +-----------+    +--------------------+   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   | #left-nav |    |      #content      |   |  
    |   |           |    |                    |   |  
    |   |           |    |                    |   | 
    |   +-----------+    |                    |   |
    +--------------------|                    |---+ 
                         |                    |   
                         |                    |  
                         |                    |   
                         |                    |   
                         +--------------------+   
                                                 
        +---clear: left-----------------------+
    Last edited by vtjustinb; 10-06-2007 at 04:35 AM.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Hmm...We had a non-technical thread regarding ASCII-art(I thought it is just for fun) and now I think its the time to start a separate sub-forum for ASCII-art.
    It's always a big problem to explain many matters through web since there is no easy and efficient way to pictorially represent a problem . For instance if someone explain something in trigonometry, instead of saying like "let ABC be a triangle where side AB, angle B .....", it would be many times easier if we can draw it by mouse.
    Will this ASCII-art serve this purpose? Come on, lets share and learn this new technique.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have another question. I am only asking because I am truely beginning to understand whats up. Say we take the last scenario and add another div below the wrapper but we want to keep it left of the content div. would it get written like this?
    Code:
    <div id="wrapper">
       <div id="left-nav">
           ....
       </div>
       </div id="content">
           ....
       </div>
    
       <div style="clear: left;"> </div>
    </div>
    <div id="next div">
    </div>
    and the css would specify

    Code:
    #next div{
    float:left;
    position:absolute;
    blah, blah...
    }
    just to get that all by it's lonesome. I ask because I am thinking graphical layout here with cool background images and whatnot...

    Thanks again for this tutorial!

  • #13
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    You technically could, but I think it would make more sense to child it within #left-nav.

    In that case you'd probably want to rename the div to something more semantically appropriate (like #left-col) and mark it up like this:

    Code:
    <div id="wrapper">
    
       <div id="left-col">
           .. stuff
           <div id="next-div">
           </div>
       </div>
     
       <div id="main-col">
       </div>
    
       <div id="footer">
       </div>
    </div>
    You'll notice in this case I replaced the clearing div with a footer div, which can serve dual-duty by having both a clear: both in its CSS rules, and also typical hold footer information.

    This skeleton makes up the basic two-column layout for CSS.

    In your example, since "#next-div" is outside of #wrapper, and you cleared the floats in #wrapper, it would float left in a similar manner to #left-nav, BUT it would appear below #wrapper since it was cleared first.

    You'd run into this situation:
    Code:
    +--(#wrapper)---------------------------------+
    |   +-----------+    +--------------------+   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   | #left-nav |    |      #content      |   |  
    |   |           |    |                    |   |  
    |   |           |    |                    |   | 
    |   |           |    |                    |   |
    |   +-----------+    |                    |   | 
    |                    |                    |   |
    |                    |                    |   |  
    |                    +--------------------+   |
    |                                             |
    |   +---clear: both-----------------------+   |
    |                                             |
    +---------------------------------------------+
        +-----------+
        |           |
        |           |
        |  #next-   |
        |   div     |
        |           |
        +-----------+
    By putting #next-div inside of #left-nav, you'd achieve the result you wanted which is #next-div floating left of the content, and directly below the nav content in the left column:

    Code:
    +--(#wrapper)---------------------------------+
    |   +-----------+    +--------------------+   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   | #left-nav |    |      #content      |   |  
    |   |           |    |                    |   |  
    |   |+---------+|    |                    |   | 
    |   ||         ||    |                    |   |
    |   || #next-  ||    |                    |   | 
    |   ||    div  ||    |                    |   |
    |   |+---------+|    |                    |   |  
    |   +-----------+    +--------------------+   |
    |                                             |
    |   +---clear: both-----------------------+   |
    |                                             |
    +---------------------------------------------+
    Last edited by vtjustinb; 10-06-2007 at 08:29 AM.

  • #14
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by abduraooft View Post
    Will this ASCII-art serve this purpose? Come on, lets share and learn this new technique.
    ASCII art is old as dirt. Back in the day we used to connect to bulletin boards with our fancy 2400 baud modems and all you got back was either ASCII or ANSI characters, which a lot of pretty skilled people had purposed to represent crude graphics (although in the case of ANSI art, some people were really able to pull off some awesome stuff).

    There's no magic to making it with a mouse, it's just sitting there with a fixed-proportion font and tweaking it around until it looks right. =) Pretty easy to use for simple things like boxes and straight-lined explanations though.

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by vtjustinb View Post
    ASCII art is old as dirt. Back in the day we used to connect to bulletin boards with our fancy 2400 baud modems and all you got back was either ASCII or ANSI characters, which a lot of pretty skilled people had purposed to represent crude graphics (although in the case of ANSI art, some people were really able to pull off some awesome stuff).

    There's no magic to making it with a mouse, it's just sitting there with a fixed-proportion font and tweaking it around until it looks right. =) Pretty easy to use for simple things like boxes and straight-lined explanations though.
    OK,all that I wanted to convey is it's hard in web to represent such problems/solutions without any graphic editors. (I,ve been in search of such a program by which one can draw and save his image along with his text data. When I saw his explanation, quite surprised.)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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