Add Image to Header

  • Hi Guys,

    On my blog, spatterblog.com, I have a header image which I’ve set to repeat across the top of the page. What I want to do now is add a Halloweeen pumpkin image to the header (on the right side). However, I can’t seem to add the pumpkin without deleting the repeating header. Any ideas on how to add the image to the already existing header? Thanks!

    `#header {
    background-color: #e75c14;
    margin: 0 0 0 1px;
    padding: 0;
    height: 174px;
    width: 758px;
    }

    #headerimg {
    margin: 0;
    height: 175px;
    width: 100%;
    }

    body {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    background: #ffffff;
    color: #000000;
    text-align: center;
    background: #ffffff url(‘images/img02.gif’) repeat-x;
    }

    #page {
    background-color: #FFCc66;
    border: 1px solid #e75c14;
    text-align: left;
    }

    #header {
    background: #e75c14 url(‘images/img02.gif’);
    }

    #headerimg {
    margin: 7px 9px 0;
    height: 192px;
    width: 880px;
    }

Viewing 4 replies - 1 through 4 (of 4 total)

  • You’d need to add a new div to one of your theme templates. footer.php might be a good place. Add something like:

    div id="pumpkin"></div>

    just above

    </body>
</html>

    Upload your image (pumpkin.jpg) to your theme’s images folder. Make a note of its width and height (eg. 120px by 120px). Then edit your theme’s stylesheet and, at the bottom, add something like:

    #pumpkin {
width:120px;
height:120px;
background:url(images/pumpkin.jpg) no-repeat top right;
position:absolute;
top:0;
right:0;
z-index:100;}
    Thread Starter spatterblog

    (@spatterblog)

    esmi,

    Why am I editing the footer.php when i’m adding an image to the header? no way to just edit the css? i am just asking, a wee bit confused.

    You could add the markup to the header but, as it has no SEO significance, it makes sense to place it at the bottom of the page markup. Since it’s being positioned absolutely by CSS, its placement in the footer doesn’t really matter.

    Thread Starter spatterblog

    (@spatterblog)

    thanks esmi!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add Image to Header’ is closed to new replies.