Avoid bars turning up above/below banner on split theme

Hi guys,
I have made a website using the split theme (fndaustralia.com.au) and replaced the stock photo with my own photo. The problem is now that depending on how I scale the website window I have bars appearing above or below the banner which looks ugly. The photo I am using is 7560 × 3916 pixels so surely should be enough to scale in whatever way it needs to be done. The problem doesn’t occur with the original split theme, so it must be something I have done wrong. Any suggestions?


How did you do this? The Split theme that comes with RapidWeaver doesn’t use the Banner image feature. It offers 4 banners or none.

Also, that beach.jpg you used is 6.2mb in size. That’s huge. My best guess is the aspect ratio is way off, the new image (7560x3916) is about 1.92. The Aspect ratio of the images included with Split is about 1.50.

So I would try to crop the image down to a size that matches the included images, 1280px x 853px or if you want the super large(and slow) size 2400px x 1598px. I would also make sure you optimize the image.

Hi Doug,
thanks for your reply. I used the CSS code as suggested in this forum:

#intro #intro-background { background: url(%resource(name-of-your-image.jpg)%) no-repeat center center; background-size: cover; }

I have just tried replacing the actual header photo in the theme data (as suggested here: http://forums.realmacsoftware.com/t/change-the-banner-background-in-tesla-split-theme/3343/85), which works as well.

I did try various ratios as per your suggestion, but the effect is the same. I have these bars appearing above and/or below my image. Thanks for the hint about file size though!!


Can you crop the image to one of the sizes that Doug suggested and republish? I’d like to see if it still does it. The image there now is ~1.93:1 vs ~1.5:1 of the theme’s image.

Hi guys,
I tried the image in a 1.5:1 ratio, but the problem was the same.
I found in another forum entry that a few other people had the same problem. As per their suggestion I added this code to the CSS:

@media only screen and (min-width: 768px) { .header { height: 50px; } }

@media only screen and (min-width: 768px) {

#intro { margin-top: -20px; } }

#intro #intro-background { height: 110%; }

which seems to have fixed it - Yay!


You still have the issue when screen width is <768.

Hi Don,
I found the problem!

I wanted to have the first word of my title in bold and therefore changed the title “FND Australia” to "FND Australia”.

When I change that back the bars are gone. Now I just have to find a way to still have the FND in bold.


Alex, I’m not convinced that’s the problem. Adding that span to change the font weight should usually not cause something like that.

I just pulled down your current header (with the title part of the image) and put it in my sample page, where I tested the bold span code for you. I do not get the black bars using your 1.9:1 image and the bold span CSS code in the title. Something else on your page is affecting it. Perhaps other CSS you added? Maybe something with a stack?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.