Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi

    You have added the image twice, once in the HTML, once in the CSS as a background image. Also, your code in the HTML is incorrect, it is showing a <strong> and </strong> tag right in the middle of the URL

    My suggestion is remove the IMG tag from the HTML altogether, and let the CSS display the background image. The reason you are not seeing all of the image is you have to declare a height on headerleft, the same height as the image – 55px.
    add this line to the CSS for imageleft
    height: 55px;

    Now in the HTML in headerleft you can add the text you want displayed in that section – the name of your site, or whatever.

    something like this
    <h1><a href="https://nowthinkaboutit.com/">My Site's name</a></h1>

    Most likely you will need to style the CSS for H1 in the header. That will make the blog title larger. You may want your background image larger also, to match whatever size you make the text. If you make it wider, change the 55px to match the new image height.

    Thread Starter EnnisP

    (@ennisp)

    Thanks stvwlf for your response. You are the first person to respond to any of my queries on this forum. I was actually quite surprised and the information you gave was VERY helpful. I can’t thank you enough and I would be glad to pay for the info. My blog header is looking much better although I do need to tweek it a bit more as per the following two questions…

    One, the image is not adjacent to the left side of the header. Is there a way I can move it over and still keep the blog name centered in the image? In other words, I don’t want to move the title over to the side also but would like to have it centered.

    And, two, I was hoping to move the blog name down over the dark (lower part) of the image so it would show up better. Is there a way to move it lower?

    If you can help me with these I will be most grateful.
    Ennis

    i can’t understand what you meant on question number one, are you try to put the image all the way to the left and keep the blog name in the center ?

    but on the second question find :

    #header h1 {
        color:#FFFFFF;
        font-family:Arial,Georgia,Trebuchet MS;
        font-size:36px;
        font-weight:normal;
        margin:0;
        padding:20px 0 0;
        text-decoration:none;

    }

    change padding:20px 0 0;
    change the 20px to either 35 or 40px
    on your style.css i think its on line 72

    hope it help ??
    -A-r-

    Thread Starter EnnisP

    (@ennisp)

    Thanks Rizaldy,
    I made the change and like the placement of the title but now my tag line and the advert element (on the right side of the header) have dipped below the header boundary and out of sight. Is there anything I can do to correct this?

    https://nowthinkaboutit.com/

    Thanks,
    Ennis

    Hi

    I added height: 110px; to .headerright {

    And also set #header p up like this below which brought your ad back. You may need more finessing
    take care…

    #header p {
      line-height:20px;
      margin:0 0 0 -50px;
      padding:0;
    }
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to add a new image to header’ is closed to new replies.