Support » Fixing WordPress » header image

  • Resolved LMP3940wp

    (@lmp3940wp)


    I have created a header image for the specified pixels. But when I upload it, it appears as a postage stamp instead of spanning the page.
    What is my remedy?

    Here is what it looks like: http://thegoldalliance.org/how-us-money-migrated-from-honest-money-to-bogus-aka-fiat-money header is too small

Viewing 15 replies - 1 through 15 (of 20 total)
  • Hi there,

    Try insert the following code in your Additional CSS:

    .header-full-width .title-area {
    max-width: 100%;
    }

    Hope this helps šŸ™‚

    Thread Starter LMP3940wp

    (@lmp3940wp)

    thank you, but I am new at this and totally unfamiliar with CSS.
    Can you give me a little more instruction about how to do this? A screen shot might do it.
    I appreciate your help and your time.
    Sincerely,
    Larry

    Hi there,

    To add the bit of CSS, you need to open the Customize tool (on top of your website when signed in) and go to Additional CSS at the very bottom. Please add the code on the next line after the “*/”

    See screenshot http://imgur.com/a/nURBJ

    Thread Starter LMP3940wp

    (@lmp3940wp)

    I did as you suggested and entered the code at the end of my CSS file, updated the CSS file, and then reloaded the the header.
    No change, ie, it didn’t do the trick.
    What I find very confusing is that I have the correct pixel dimensions as per the specs in the Genesis Sample theme: 600×160.
    Here is what I get: http://thegoldalliance.org/
    notice the little image at the top.
    I very much appreciate your attempting to help me with this and for your time.
    With Warm Regards,
    Larry

    Oops, in addition the the code above, you’ll need to add this as well to the CSS, this can go below the other one:

    .header-image .site-title > a {
    background-size: cover !important;
    }

    Hope this helps šŸ™‚

    Thread Starter LMP3940wp

    (@lmp3940wp)

    Here is what I added to the customizing CSS and saved it. I then uploaded the image into the header area.

    .header-full-width .title-area {
    max-width: 100%;
    }

    .header-image .site-title > a {
    background-size: cover !important;
    }

    This did not work, either. I am still looking at a postage stamp.
    Any further ideas?
    Again, I very much appreciate your help and your time.
    Is there a way I can send you the image so you can test it at your end?
    Best,
    Larry

    Ok, I think there’s one more query that you should add to it, I’ve tested it with Genesis Sample theme and it works for me:

    .header-image .title-area {
    max-width: 100%;
    }

    So below is all the CSS you need to add:

    .header-full-width .title-area {
    max-width: 100%;
    }
    .header-image .title-area {
    max-width: 100%;
    }
    .header-image .site-title > a {
    background-size: cover !important;
    }

    Let me know how it goes for you!

    Thread Starter LMP3940wp

    (@lmp3940wp)

    It still did not work.
    Here is a copy of what I put in the customizing CSS box and then saved it, I just copied and pasted the code you sent to me:

    /*
    You can add your own CSS here.
    .header-full-width .title-area {
    max-width: 100%;
    }
    .header-image .title-area {
    max-width: 100%;
    }
    .header-image .site-title > a {
    background-size: cover !important;
    }

    Click the help icon above to learn more.
    */

    Am I not doing something that I should be doing, or am I doing something incorrectly?

    Thread Starter LMP3940wp

    (@lmp3940wp)

    Is it possible that there is something wrong with my jpeg?
    Here is what the specs show in the media editor:

    File name: cropped-cropped-b2.jpg
    File type: image/jpeg
    Uploaded on: August 10, 2017
    File size: 30 KB
    Dimensions: 600 Ɨ 160

    The dimensions is what is called for in the Genesis Sample specs and when I attempt to upload the image.

    Oh I see what you’ve done incorrectly now, the CSS should go after the below:

    /*
    You can add your own CSS here.
    
    Click the help icon above to learn more.
    */

    So you need to hit Enter to create a new line, then paste my code there. All together the box should content this:

    /*
    You can add your own CSS here.
    
    Click the help icon above to learn more.
    */
    
    .header-full-width .title-area {
    max-width: 100%;
    }
    .header-image .title-area {
    max-width: 100%;
    }
    .header-image .site-title > a {
    background-size: cover !important;
    }

    Please try this and let me know.

    Thread Starter LMP3940wp

    (@lmp3940wp)

    That did it.
    THANK YOU, THANK YOU, THANK YOU.
    Works fine.

    Although the image has the correct dimensions, it is not displaying as it shows in the media editor. It is truncated.

    Any thoughts about that?

    You are wonderful to have stayed with this.
    I am very grateful.
    Best,
    Larry

    Thread Starter LMP3940wp

    (@lmp3940wp)

    here is a link to the image in its own post.
    http://thegoldalliance.org/image-from-media-file
    Can you tell if there is something wrong with it?
    The Samples theme specs are 600×160, and I believe I have that correct.

    Thread Starter LMP3940wp

    (@lmp3940wp)

    I just now saved the image from the post and looked at its details.
    It appears to be in sync with the specs.
    If it would be helpful, I could create a post with the image specs.
    Shall I do that?

    Hi Larry,

    To have the whole image displayed, there will be some more CSS to add. Firstly, please remove the bit of CSS below that I gave you:

    .header-image .site-title > a {
    background-size: cover !important;
    }

    And replace this below instead:

    .header-image .site-title > a {
    	background-size: contain !important;
    	min-height: 304px;
    }
    Thread Starter LMP3940wp

    (@lmp3940wp)

    Alas, the image went back to being a postage stamp. http://thegoldalliance.org/

    Here is what the CSS looks like now:

    /*
    You can add your own CSS here.

    Click the help icon above to learn more.
    */

    .header-full-width .title-area {
    max-width: 100%;
    }

    .header-image .site-title > a {
    background-size: contain !important;
    min-height: 304px;
    }

    Please note that the word “contain” shows in red. I don’t recall that before.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘header image’ is closed to new replies.