The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS RESOLVED: Module Headers: Background Image with font only padding

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #40193

    Hi everyone, I’ve been searching in vain for what I’m sure must be a simple thing, but no matter what I try (yes, I have Firebug) I cannot get it to work and am almost desperate in my stupidity :)

    I wish to create a standard header for all modules with the same background image stretched to fill the width of the module, i.e no padding. I have no problem here, as you can see at

    My problem is when I try to put padding to font only, i.e. 7px left and right so that the text is not right against the border. I have tried every #nav h3 and #right h3 (including those with js_header) anything with header span….. in fact anything I can find in any and all of the css files.

    When I finally get the test to move, it pads the background image as well. Is there a way to “separate” these so that I can pad the font and not the image??

    I would greatly appreciate your help, thank you.


    I would use a pseudo element if you can:


    Try to Edit Your Code & Add these values.

    .menuhorizontal_menu li {float: left;
    font-size: 1.2em;
    padding: 0 20px;
    border-right: 1px solid white;
    line-height: 28px;
    text-decoration: none;
    height: 30px;
    list-style-type: none;}

    You can use different image instead of right border for separation.


    Ah…I see you need to have text in there.

    You could do that with my previous example (as the content) but it wouldn’t be semantic.

    You could add a background image to the ‘h3’ tag.

    Frankly, I would just throw a ‘header’ element in there and but the ‘h3’ in there.

    So many more options –


    Hi there, thanks for responding :). I confess, I’m lost, being something of a novice… sigh. Are you suggesting that I create a generic “module header” element? That would make sense, and I was thinking along the lines of a .moduletable_header. I’m just not sure how I would “write” this to make it work. Lol, I’m learning as quickly as I can.

    I had a look at the first example here… in order to get the background image into the modules I had to add it to both #nav module h3 and #right module h3 – would a generic header element do this for all modules? Would it help if I posted the css and layout.css?


    Hmmm… looking at the control 2 on the second example, I’m going to give this a try….


    Eeeeek! I added the code between . moduletable and .moduletablemenu like this:

    border:1px solid #370843;
    background: #fefed2;
    padding:0px 0px 0px 0px;

    div {
    margin:25px auto;

    header {
    background-image: url(../images/modheader.png);
    padding:5px 0;

    .moduletable header h3 {
    padding-left: 7px;

    border:1px solid #380743;
    background: #fefed2;
    padding: 0px 0px 0px 0px;

    Clearly the wrong thing to do, lol… whole site has moved to the right, a module is floating above the header and every last bit of text has vanished!


    span.backh3 {
    padding: 0 7px;}

    look for these and change the padding as shown


    Hi there… thanks for the suggestions, tried them all, had no luck, then had a brainwave…. I found the header text and added “text-indent:7px;” and it worked like a charm. The W3schools validator didn’t pick up an error so I assume it’s ok. All help much appreciated

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.