Header image repeat when scrolling

HTML & CSS
1

Hi, this is probably something really simple and obvious, but Im just learning so bear with me!

I want my header to repeat horizontally. It works fine, however when I make the browser window smaller then scroll back across to the right with the scroll bar, the header appears cut off (I think where the container ends) and only starts to repeat again when I resize the browser window larger. Is there any way around this?

Thanks in advance!



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ben Redpath Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="main">
   <div class="container"> 
      
      <div id="header">
        <div id="logo">
        <h1>Ben Redpath</h1>
        </div> 
       
       <div id="title">
        <h3>Graphic Design & Illustration</h3>
       </div>
       
       <ul id="top menu"> 
         <li><a href="#">Contact</a></li>  
         <li><a href="#">C.V</a></li>  
         <li><a href="#">Blog</a></li>  
       </ul>  
      </div><!--end header-->
    
      <div id="content">
      </div><!--end content-->
    
      <div id="sidebar">
       <ul id="work menu"> 
         <li><a href="#">Work</a></li>
         <li><a href="#">Work</a></li>  
         <li><a href="#">Work</a></li>  
         <li><a href="#">Work</a></li>    
       </div><!--end sidebar-->
       
   </div><!--end main container-->
</div><!--end main-->
     
     <div id="footer">
      <div class="container">
      <p>Copyright © 2010<br />  
            All Rights Reserved</p>
      </div><!--end footer container--> 
     </div><!--end footer-->
      
    
    
</body>
</html>


@charset "UTF-8";
/* CSS Document */
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

body { font-family: Arial, Helvetica, sans-serif; 
       background-color: black;
}
		   
#main {
       background: url(images/header_slice.jpg) repeat-x;	   
}	

.container {
           width: 960px;
		   margin: 0 auto;
		   padding-left: 30px;
		   padding-right: 30px;
		   }

#logo {
	   height: 74px;
	   width: 185px;
}
		   
#logo h1 {
          text-indent: -9999px;
		  }
		  
#header {
        padding-top: 30px;
		}
2

Awesome! Thanks for all your help guys!

3

Again, as Ray said, the overflow: visible is just extra text for fun and giggles… it’s not doing anything.

Otherwise, without seeing the page, it seems ok.

4

As for the remaining bit of black try setting the padding of .container to 0px. It solved the issue for me…although I really can’t explain why.

@Rayzur - Thanks for the tip on the unnecessary code. Looks like I have some css files to tidy up.

5

Hi guys,

thanks for your prompt responses!

I tried cscott and Rayzurs suggestions - this helped but I still get a bit of black where the header should be repeating when I try and scroll across. I increased the min-width of the main div which seems to work -

#main {
       background: url(images/header_slice.jpg) repeat-x;
	   width:100%;
	   min-width:1280px;
	   overflow: visible;
      }

Is this a suitable solution?

Thanks again for any help!

6

Hey Ben,

I used to come across this problem when repeating an image the full width of the browser. If that’s the case in your design here’s how I solved the issue:

body {  
            font-family: Arial, Helvetica, sans-serif; 
            background-color: black;
	    width: 100%; /* Defines width */
	    min-width: 960px; /* Says....Hey! This page is no smaller than 960px */
            }	
#main {
	    background: url(images/header_slice.jpg) top left repeat-x;
	    width: 100%;
	    min-width: 960px;
	    overflow: visible;
            }	

.container {
           width: 960px;
	   margin: 0 auto;
	   padding-left: 0px; /* Not sure if this is needed in your design, but it was causing a 20px gap to the right in FF */
           padding-right: 0px; /* ditto */
           }

Also, one of your UL’s needs an endtag. Hope this helps.

7

Try setting a fixed width for the header:

#header {
    padding-top: 30px;
    [COLOR="Red"]width: 900px;[/COLOR]
}

I’m assuming the background is on the header? Your code doesn’t show it. That’s how I’ve fixed this problem in the past.

8

The #main is defaulting to 100% width, and that is where the header image is. It is only the width of the viewport at any given instance.

The trick is to set the min-width there and then set a 100% width to give IE haslayout.

#main {
    [COLOR=Blue]width:100%; /*haslayout IE*/
    min-width:960px;[/COLOR]
    background: url(images/header_slice.jpg) repeat-x;       
}

EDIT:
Should have refreshed my tab, I see that cscott gave the answer too.
You should not need the width or min-width on the body though, it only needs to be set on the main wrapper.

overflow:visible; is the default so it does not need to be declared on #main either.