Background Image in Div not repeating

Mn3MoN1C · 10-05-2007, 03:56 PM

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>

vtjustinb · 10-05-2007, 04:26 PM

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.

Mn3MoN1C · 10-05-2007, 05:08 PM

I'm kind of confused when you say I should clear the two floats. Could you please provide an example of code? Thank you

vtjustinb · 10-05-2007, 05:19 PM

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-----------------------+   |
|                                             |
+---------------------------------------------+

Mn3MoN1C · 10-05-2007, 06:31 PM

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.

rmedek · 10-05-2007, 06:50 PM

That is the best diagram and explanation of clearing floats I have ever seen, ASCII or not.

abduraooft · 10-05-2007, 07:08 PM

Nice one vtjustinb,
This explanation should be listed under a sticky (IMO)

rmedek · 10-05-2007, 07:12 PM

Quote:

Originally Posted by abduraooft

Nice one vtjustinb,
This explanation should be listed under a sticky (IMO)

Done!

toothmkr57 · 10-06-2007, 04:13 AM

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?

vtjustinb · 10-06-2007, 04:33 AM

Quote:

Originally Posted by toothmkr57

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-----------------------+

abduraooft · 10-06-2007, 06:31 AM

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.

toothmkr57 · 10-06-2007, 06:35 AM

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!

vtjustinb · 10-06-2007, 08:26 AM

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-----------------------+   |
|                                             |
+---------------------------------------------+

vtjustinb · 10-06-2007, 08:28 AM

Quote:

Originally Posted by abduraooft

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.

abduraooft · 10-06-2007, 10:19 AM

Quote:

Originally Posted by vtjustinb

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.)