Why Is My Custom Header Image Cropped?

  • Hi,

    I’ve been stuck on this problem over a week now. If you can help me, I’d be very thankful.

    Here is my website: https://www.vitamincommissions.com/ Notice, how my custom header image is cropped. Here is how it should look: https://www.vitamincommissions.com/wp-content/uploads/Health_Affiliate_Program.jpg

    Here are the WPFolio theme programmmer’s instructions (although I prefer to customize them if possible?)…

    /* @group header / / To change your header image create an image that is 960 pixels wide by 200 pixels high and name it header.jpg and place in the images folder in your theme directory/

    Is it possible to name it /health_affiliate_program.jpg for SEO, and keep the size 871×235? (I uploaded this image before I found the instructions. But even now, I still don’t know where to find the suggested code and folders.)

    Here is the latest release of his code (which I haven’t installed for fear of losing my custom edits) https://github.com/slambert/WPFolio

    Here is my current relevant(?) code from style.css…

    div.header {background-image: url(‘https://www.vitamincommissions.com/wp-content/uploads/Health_Affiliate_Program.jpg’);

    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-left: 0;
    padding: 1.5em 30px .5em;
    max-height:240px;
    min-height: 50px;
    overflow: visible;}

    If you know how to solve this problem, I’d really appreciate your help.

    Thank you,

    Greg

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

  • Try this:

    div.header {background-image: url(‘https://www.vitamincommissions.com/wp-content/uploads/Health_Affiliate_Program.jpg’);

    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-left: 0;
    padding: 1.5em 30px .5em;
    height: 235px;
    overflow: visible;}

    Test it in more than one browser.

    Thread Starter goodnews1

    (@goodnews1)

    Clayton, thank you very much. You just made my life a little easier!

    You’re welcome.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Why Is My Custom Header Image Cropped?’ is closed to new replies.