header: seperate background and border-bottom - *how??* (3 posts)

  1. Iono
    Posted 3 years ago #


    I'm trying to seperate my header image from a border below it.

    1. the border should cover the whole page, but when I change its widht, the image moves to the left (it's supposed to be centered) and is repeated. Do I have to add some snippet to "background" and then change the widht? Or is there a way to seperate both parts?

    2. The margin between the header image and the border is annoying me. I want to have it on top as well, but just don't find where to do that.

    #header {
        background: url("/wp-content/uploads/Small2.jpeg") repeat-x scroll 0 0 transparent;
        border-bottom: 10px solid #CE3000;
        height: 221px;
        margin: 0 auto;
        padding: 20px 0;
        width: 631px;

    Pastebin CSS: http://pastebin.com/FajtmDr7
    Pastebin HTML: http://pastebin.com/CqZvYL3E

    Using retro-fitted theme.
    Thanks for any attempt to help!

  2. Michael
    Part-Time Forum Moderator
    Posted 3 years ago #

    try to change the background line to:

    background: url("/wp-content/uploads/Small2.jpeg") no-repeat scroll center center transparent;

    see http://www.w3schools.com/css/css_background.asp

  3. Iono
    Posted 3 years ago #

    Yay, it worked! Thank you, alchymyth!

Topic Closed

This topic has been closed to new replies.

About this Topic