WordPress.org

Forums

[resolved] Need Help Adding image to header (6 posts)

  1. kennethkaniff
    Member
    Posted 5 years ago #

    Hello Gang,

    I need help adding an image to our existing header.

    Here is the CSS, please advise the code we need to add:

    Height of pic: 86px

    ---start of css----
    #header{
    width:100%;
    height:183px;
    background:url(images/bgr_header_sub.png) no-repeat left bottom;

    }
    #indexpage #header{
    background:url(images/bgr_header.png) no-repeat left bottom;

    }
    #logo{
    padding:40px 0 0 47px;
    float:left;
    width:449px;
    }
    #logo a{
    font-size:28px;
    font-family:Georgia, "Helvetica", Times, serif;
    color:#006660;
    font-style:
    }
    #logo span{
    font-size:12px;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#006660;

    }
    #logo a span{
    color:#006660;

    ---end of css---

    Thanks in advance!!

  2. kennethkaniff
    Member
    Posted 5 years ago #

    ttt - still need help with this. tried code I found online here and no luck.

  3. buddha trance
    Member
    Posted 5 years ago #

    Do you want to replace the existing image background, or overlay an image on top? The current header images are set here:

    #header{
    width:100%;
    height:183px;
    background:url(images/bgr_header_sub.png) no-repeat left bottom;
    
    }
    #indexpage #header{
    background:url(images/bgr_header.png) no-repeat left bottom;
    
    }

    To replace, upload the new image to the "images" directory of your theme, and change the image url to
    (images/new-image.png) [or the file extension you have for it]

    To overlay, in header.php create a <div class="yourstyle"> image here </div> and style with css

    If this is not what you had in mind, please provide a link to your site, and tell us where you want the image to appear, so we can look at it and help you out.

  4. kennethkaniff
    Member
    Posted 5 years ago #

    Thanks for the response! :)

    I'm simply looking to overlay a small image to the left of the blog title in the header. If you could let me know what code to insert and where that would be a life saver and I would be forever greatful :)

  5. buddha trance
    Member
    Posted 5 years ago #

    In header.php of your theme, before you see something like:

    <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>

    insert

    <div class="title-img"><img src="path/to/your/image.jpg" /></div>

    css in style sheet

    .title-img {
    padding-top:30px;
    margin-right:20px;
    margin-left:50px;
    display:block;
    }

    and adjust css accordingly. That should work.

    Really late here right now, I will check back tomorrow. :-)

  6. kennethkaniff
    Member
    Posted 5 years ago #

    Thanks a million for the help. I owe you a beer :)

Topic Closed

This topic has been closed to new replies.

About this Topic