Just wanted to share my experience with this in case anyone is trying to figure out how to do the same thing...
First, some quick background:
I am using the horbar as a "category" header on my site, meaning that the background image in the horbar changes based on the category page a user is viewing. Each banner background image included text with the title and subtitle of the section. The problem is that I'm using a flexible layout, and so as the browser window gets smaller, the background image gets clipped on each side (I have it set to "top center"). With my text included on the background image, it too got clipped. So I went in search of a solution and this is what I came up with:
Following the advice in this thread, I editied bfa_header_config.php to include a secondary div in the $horizontal_bar2 section. So, instead of my code looking like this:
Code:
$horizontal_bar2 = '<div class="horbar2"> </div>';
It looks like this:
Code:
$horizontal_bar2 = '<div class="horbar2"><div class="horbar_text"> </div></div>';
Then I created background images for each of my categories including only the text that I wanted to display (I wanted some styling to it outside of the capabilities of css), and made them transparent PNGs so that they simply overlay the background banner image.
So, I would have cat_linklane_background.png (the background banner image), and cat_linklane_text.png (the transparent png with only the text).
Then, in the Add CSS Ata. panel, I added the following definitions:
To define the width / height of the horbar_text div:
Code:
div.horbar_text {
width: 100%;
height: 100%;
}
And then, to display the text image on top of the background banner I added:
Code:
body.category-linklane div.horbar_text {
background: url('<?php echo get_template_directory_uri(); ?>/images/cat_linklane_text.png') no-repeat top left;
}
And it works like a charm! I was so excited to figure out how to do this! I hope it will be useful for someone else!
You can see it in action at
http://www.laurenacooper.com/thoroughfare and then click on the "Link Lane" category.