Shape 5

I have a repeating background image but it doesn't repeat beyond the width of the screen.  In other words, if my website is 1200px wide but I view it through a 1024 screen, when I scroll to the right there is no background image beyond the 1024px point. 

S5_outerwrap and S5_headerwrap did not have widths defined in index.php.  Added #s5_headerwrap {width:<?php echo ($s5_body_width);?>px;} and similar for outerwrap but now the site is left justified instead of being centered in a wide screen. 

How do I fix that so the template is consistent and with all screen sizes?

http://www.xvdg.com/sfc
 

I would remove the widths that you added as these are defined near the top of the index.php file in the style area.  Also what image are you trying to repeat?  I see a banner image up top with 5 different images in it

Ok. I've taken out the widths that I put in.  Headerwrap and outerwrap are now as per the original template.

If they are defined at the top of index.php as you claim then they are defined incorrectly but I can't see them there. As you can see they now default to the viewing screen width and not the website width and the repeating banner is cut off prematurely when you scroll to the right.

If you don't have a smaller screen to view this have a look through http://www.asisness.com/Tools/screensize/

This is because you have set the overall site width in your template parameters area of Joomla to 1178px it needs to be something like:  925px or so if you want it to display properly at 1024 x 768

Are you seriously suggesting that this template won't work unless it is set to the narrowest screensize that anyone on the world wide web will use?  That means all websites should be no wider than 800px because there are still screens that small in use.  This page is for the world wide web.  We don't control all of the computer screens out there.

Have another look.  The rest of the website is fine.  If looked at through a smaller screen there is a scroll bar at the bottom to allow you to scroll to see the rest of the page.  It is only the top area that is not working properly and it is because the width is defined as the screen width instead of the page width.  The problem is that if I define the area as the page width as per my original posting, it also becomes left justified.

Is there anyone else with some CSS knowledge who can help me?

The template width needs to be 975px actually per the http://shape5.com/demo/city_portal/ demo if you want the site to appear on resolutions of 1024x768 or higher not 800x600.  The reason why we can't set the width to 1024 is because of the shadows and the padding you have to take in account for on the left and right sides.  1024x768 is the lowest average resolution now days.  If you receiving scroll bars it is because something is set too wide for whatever resolution you are viewing the site in.

I see you have set the #s5_outerwrap to a width of 1200px.  If you set this to 100% the top will repeat horizontally as I believe this is what you are going for.  I still recommend decreasing the overall site width to 975 though or else a lot of people will still get scrollbars.

Regards,

You are still missing the point.  The scroll bars are not the problem.  The problem is that the top area of the template doesn't respond to the scroll bar like the rest of the template for the reasons I have stated multiple times. 

Never mind. I've scrapped this template as a bad joke and found one that works consistently.