Screen Resolution & the Banner

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: https://www.empowermentsanctuary.com/marketplace/

Thanks in advance :smile:

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.

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!! :clap: :clap:

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

Or something similar.

Awesome! Thanks Rob!

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:

with:

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

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?

Since your banner has that dark blue background, why don't you leave that as is, perhaps center it, and add this into your stylesheet:

#logo {
background-color: #03002e;
text-align:center;
}

The color I've added there is the same blue color on your logo and the text-align will center the logo :)

That's an awesome idea and I've tried it, but for whatever reason, the color doesn't resolve on the page in the same shade as the banner. I suspect that it's related to the banner being several layers of color...it darkens it a bit and there's a clear line of distinction between them.

Very frustrating!

But I sure do appreciate the suggestion!

I saved your header image and blown it up in Photoshop, there's a 1px border around the outside that is slightly lighter than the rest of the blue and is causing the line distinction, if you can paint just these 1px sections the same darker shade the background will work....I've done it here on my computer and if you want it sent back to you to try, just PM me and I'll give you my email addy :D

Wow, I wonder how that happened? Especially since I just cropped the side edges off that puppy last night before uploading it to replace the original, larger banner I had up there.

Is there any chance you picked up the color from the page border when you lifted the banner? That's set at 04003F, which is slightly lighter than the banner background of 03002E.

The reason for that is that 03002E looks great with lighter shades of blue on it, but when it stands alone against white, it's so dark it appears very close to black, so I lightened the page and box borders to 04003F.

Anyway, I'll take a look at it in photoshop and blow it up as you did and see if I can detect the color change you're seeing and get back to you.

Thanks for the very kind offer to send my fixed banner back to me, I may very well take you up on it! Let me see if I can find what you're seeing first.

No, all I did was right click and save image as, so I saved it just the way it was created, I'm not sure where the lighter border has come from....just that I saw it there LOL and it's not even that much of a difference, but graphics can be tricky sometimes LOL

I did try seeing how the header looked with a background color of the border color you used on the other areas (04003F) but there was a very definite difference there lol

Ok, so I blew it up to 300%. I didn't see what you saw (a lighter shade of blue), but what I did see was that the paint didn't fill the canvas. That probably happened during all the edits it's gone through over the months and just slipped my notice.

So I added a new layer, filled the background and got rid of the old background. The background appears to me to be a solid color at this point.

I've uploaded the new image and will be testing it against a colored background later tonight to see what I get.

I'll let you know how that turns out.

Thanks for your help!

Ok, dinner plans fell through so I tested this just now.

I remember now why I needed to to add a repeating image to the background behind the banner instead of just filling in with color.

It looks great in FF, but in IE, it resolves as a different color than the banner, even though it's the same color code.

Take a look in IE and you'll see what I mean.

I'm back to trying to figure out how to code two different background images.

That's is strange, in IE the banner color is actually coming up as #020024, so it's like the banner is displaying a different color and not the background....weird LOL

I took a 5px slice from the side of the banner, attaching it here for you, right-click the larger image and save image as....upload it to your template images folder and try this:

#logo {
background-color: #03002e;
background-image:url('../images/logoBack.png');
background-repeat: repeat;
text-align:center;
}

crosses fingers and hopes it works LOL

OMG I'm SUCH an a$$!! LOL

I already had a little background snippet uploaded that I created the other day, so I used that one, renamed it and input your code.

ALL this time I've been trying to make this work and you know what?? It wasn't working because I didn't have ' before and after the image URL. :oops:

After looking at it again and realizing that was the issue, I removed the background color and put in this:

#logoWrapper {
background-image:url('../images/logoBack.png');
background-repeat: repeat;
text-align:center;
}

It works with and without
background-color: #03002e;
included.

But it seems to load more smoothly with it, so I put it back in. And it looks great in both IE and FF!

So yeah...all this time is was syntax. It's always the little things that get ya!

I can't thank you enough for your guidance and the time you've taken to help me with this. I really appreciate it!

:clap: :clap:

You are more than welcome :D

And going back to look at the previous posts, it was more likley that this extra bit /includes/templates/barebones/templates was the culprit for it not showing since you only need ../images/logoBack.png in the stylesheet....but I missed that myself LOL

Glad it's all working, and it looks great! :clap:

Thanks!

Just a note: the quotes around the image url are not needed in CSS. They work, but why add something unnecessary?

url(../images/logoBack.png) should do the job - at least, I've never seen a case where it didn't, and that's how the references describe it.

#logoWrapper {
width:10px; <-----------specifying 10px width for the wrapper will cause problems, if the image is more than 10px.
height:128px;

Good to know!

Thanks Glenn :clap: