Screen Resolution & the Banner

[LissaE]

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

[ScriptJunkie]

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!

[ScriptJunkie]

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.

[LissaE]

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*

[ScriptJunkie]

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.

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!

[LissaE]

You are more than welcome

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!

[ScriptJunkie]

Thanks!

[gjh42]

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;

[ScriptJunkie]

Good to know!

Thanks Glenn