Screen Resolution & the Banner

[ScriptJunkie]

Hi All,

The template I used to build my own template from (Barebones) is configured in such a way that when viewed on 800x600, it shrinks appropriately (no ugly horizontal scroll bar).

However, once I added my banner, that changed. Obviously the banner is too wide and needs to be set be no wider than 800px.

The question is, how can I get the banner to go all the way across the screen then?

Someone told me to cut a snippet from the banner's background and make a tall narrow .png file out of it, and then put that png file in the header and set it to repeat on the X axis.

This way, when viewed on smaller monitors or resolutions, the banner will be called and displayed alone. But when viewed on larger monitors or higher resolutions, the additional white space on either side will be filled in with snippet.

The problem is, I don't know how to code that. I understand it involves setting up a separate header div and an additional class for the snippet?

My response to that is 'huh?' Unfortunately, the person who gave me the initial advice is unable to further coach me with regard to the actual code requirements.

Can anyone assist?

My store is here: www.empowermentsanctuary.com/marketplace/

Thanks in advance

[Website Rob]

Your current Banner is 997x160. First thing is to crop the image to have only 3 or 4 px on either side of your text. This makes the image itself as wide as you can make it. Now resize the image to a width of, say, 774px and the image program should adjust the height automatically for you.

You then copy a slice of the background color and make that 1px wide and as high as the image height. This will be the background image.

In your CSS code you repeat-x for the background image and have your Banner sit on top of it.

The above is an idea of the steps to take but if not familiar with using an image program it may not make sense, so getting someone to do it for you might be easier.

[ScriptJunkie]

Hi Rob,

Sorry for the delay in expressing my thanks, I couldn't find my post!

I won't have any problems with the graphical work, I was more concerned about coding.

So it sounds like I don't need to stress over separate divs for the header - I just need to adjust my graphic as appropriate, take my snippet, and set it as the background?

The fact that the snippet will only be a certain number of px high and set to repeat only on the horizontal will prevent it from becoming a background for the entire page?

Am I understanding that correctly?

If so, that's so easy!

I've been trying to get this answer for months from various sources and have received anything from 'it can't be done' to complex answers that are way over my head.

I should have brought my question to the forum in the first place!

Thanks Rob!!

[Website Rob]

You're welcome for the help and one other thing I forgot. To center your image use:

<div style="width:1px; height:??px; background:url(path_to_img) repeat-x">

<div style="margin:0 auto; padding:0; text-align:center"><img src="....."></div>

</div>

Or something similar.

[ScriptJunkie]

Awesome! Thanks Rob!

[ScriptJunkie]

I finally got around to giving this a try and I'm really struggling with it.

I tried a lot of different things.

I tried modifying both the CSS file and the tpl_header.php file. neither one worked for me - clearly I'm doing something wrong.

I made the necessary changes to the graphic and put the new dimensions into the languages file.

Then I tried this:

Replaced:

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

with:

<div style="width:10px; height:128px;

background:url(.../includes/templates/barebones/templates/images/background.png) repeat-x">

<div style="margin:0 auto; padding:0; text-align:center"><img src=".../includes/templates/barebones/templates/images/logo.png"></div>

in the tpl_header file. That made the banner disappear.

Then I tried this in CSS:

Replaced:

#logoWrapper{
background-color: #ffffff;
}

With:

#logoWrapper {
width:10px;
height:128px;
background-image:url(.../includes/templates/barebones/templates/images/background.png);
background-repeat:repeat-x;
}

and then:

#logoWrapper {
width:10px;
height:128px;
background-image:url(.../includes/templates/barebones/templates/images/background.png);
background-repeat:repeat-x;
margin:0 auto;
padding:0;
text-align:center;
img src: url(.../includes/templates/barebones/templates/images/logo.png);
}

and finally this:

#logoWrapper {
width:10px;
height:128px;
background-image:url(.../includes/templates/barebones/templates/images/background.png);
background-repeat:repeat-x;
}
#logoWrapper {
margin:0 auto;
padding:0;
text-align:center;
img src: url(.../includes/templates/barebones/templates/images/logo.png);
}

All CSS edits resulted in the banner being centered, but the background image wouldn't display and tile horizontally, so I end up with a bunch of white space on either side.

What am I doing wrong?