CSS Question - Multiple Background Images

[fierystorm]

I'm curious about this for the side boxes and header/footer ez-link bars. I know that some nav bars and side boxes utilize multiple images in order to do the sides and center giving the entire bar a more rounded appearance. Not too sure how to apply this though as I'm self-taught. Any suggestions? I know ordinarily it involves coding similar to this:

background-image: url(../images/1.gif) top left no-repeat, url(../images/tile_back2.gif) top right no-repeat, url(../images/3.gif) left repeat-x;

However, this has no apparent effect in the stylesheet.css and will cancel the original image. Although I know this was originally a CSS2 concept, it is not integrated in the majority of browsers and I'd love to integrate this into my current site if anyone has some insight into how to do it. Something similar to what others have done, as with this commercial site:

osc3.template-help.com/zencart_20850/index.php

Thoughts? Thanks!

[gjh42]

For any element with a fixed width and height (usually true for sidebox headings), you can use a single background. For flexible-width elements, you may need to add extra wrapper divs inside the original ones so you can apply the "sliding doors" effect.

[fierystorm]

Hmm, thanks for that answer, Glenn! One snag I've run into is when I've attempted to add additional div lines inside div wrapper, it merely added an additional line below the original. I had attempted to add a div line by this method:

<div id="navEZPagesTopRight">
</div>

inside the ez header nav bar within the tpl_header.php file.

Could you give a example of what you mean? I'm assuming you do not mean in the stylesheet.css and instead in the .php file as I had tried.

Thanks again, Glenn!

[gjh42]

When you add a wrapper div inside another one, you need to find the closing </div> of the original and add your new </div> just before that.

[fierystorm]

Hmm... When I attempt to do that it adds an additional line just underneath my original background image and also cuts off part of that original background image in my nav bar. Do you see anything I'm doing wrong located with the css?

This is the code I attempted to add within the current div wrapper:

<div id="navEZPagesTopRight">
</div>

Here is the css I'm using along with the original:

#navEZPagesTop {
background-image: url(../images/tile_2.gif);
background-repeat: no-repeat;
background-position: top left;
min-height: 20px;
font-size: 1.10em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navEZPagesTopRight {
background-image: url(../images/tile_1.gif);
background-repeat: no-repeat;
background-position: top right;
min-height: 20px;
font-size: 1.10em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

Thanks again for your answers, Glenn!

[fierystorm]

Any thoughts? Appreciated! Thanks!

[gjh42]

Out of time now... I'll be back after the Thanksgiving weekend.

You are not really putting the </div> immediately after its opening <div ...> tag, are you?

[ppco]

here's a dumb question - and I've been all over this forum, typing my queries in different ways but keep coming up with the same answers that don't apply. I found the code once a while back but forgot to bookmark it.

How and where do I add a site wide background image to every page? I don't mean in the body but behind everything. I have a small gif that will have to be repeated.

Any help will be appreciated!

[gjh42]

"In the body" *is* "behind everything".

Assuming you really mean that you want the gif repeated all over the screen behind all other content, borders, etc., you would add your gif as a background to the body rule in
/includes/templates/your_template/css/stylesheet.css.

body {
    background: url(../images/yourimage.gif);
    }

Add the background line to the "body {" rule already in the stylesheet.

Save the image to /includes/templates/your_template/images/.

[ppco]

Oy, it's so simple. One day I'll know it well :)

Thank you, Glenn.