Support » Themes and Templates » Shadowed Backgrounds/Containers

  • They’re all over the place! I’m wondering if someone can locate a tutorial regarding shadowed backgrounds or pages that have a drop shadow effect. Here’s an idea of what I’m after (the background only):
    Andy Budd (the right and bottom drop shadow)
    Happy Cog (probably just a centred, y-repeating transparent gif, right?)
    Powazek (same as above … but what if I wanted that on 3 sides?)

Viewing 15 replies - 1 through 15 (of 15 total)
  • A List Apart. Not hard to find if you’d looked. 😉

    Yes, I’ve seen that before … but I’m talking backgrounds here not images.

    @gregor: If you look at the way this forum is done, you might get a good idea of the method.
    Here is the line in the CSS that creates the shadowed left and right columns you see here:
    #bling {
    background: url(images/bg-3.gif) repeat-y center top;
    and the image looks like:

    Yes true. But our guy being a purist is obviously after a pure css solution.
    Goto google.

    Ummmm…what LL posted *is* a pure CSS solution. It’s *purely* using the background tag of CSS. I’ll never understand why people incorrectly believe CSS=no graphics??? The idea of CSS is to separate style from content/semantic markup. Background images are style…pure and simple.

    yep, a repeating background-image is what you’re after. If you want it on three sides (or four, whatever) or you want one on the bottom, you’d use a footer div’ with a drop shadow image in it. same for a header.

    @ tecervo. I just knew you’d be here :-). Welcome. I just think that a lot of folks seem to want to go the whole nine yards. The easy solution would be – well – easy! No fun at all.

    Yeah, I hear that alot…not just here. But I still don’t get it. I think a lot of folks are very confused as to what the “whole nine yards” really are, that’s all. Just like the tables for data argument…there are those that *insist* tables shouldn’t be used *ever*…even for data (and that’s just plain wrong.)
    Anyway, back to the topic at hand, a repeating background for the drop shadow effect works great (for fixed width layouts, anyway.)

    Fixed width? Therein lies the rub.

    Background shadows can be easily done on flexible width layouts as well.

    here is a link taht may be an idea for wha tyou are looking for

    @faewench .
    thanks for mention ………nice site

    With the greatest of respect to allusion, it is true that shadows can be used just about anywhere. But this blog for example uses a single graphic. By definition that is fixed. Fluid layouts bring with them a whole additional layer of complexity. The benefit of allusion’s method here is simplicity.

    I can’t get this to work. What am I doing wrong? I added the above code to my stylesheet but nothing happens.

    Could someone please post the URL, that was posted a month or so back, to the repository of repeating background images like the one used on this page? I am creating a new theme and recall that was a great resource. Thanks!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Shadowed Backgrounds/Containers’ is closed to new replies.