• Hello all. I am new to WordPress but have tried to read and watch as much content as I could prior to posting this. Just starting out. I am having trouble sizing a picture into my header, theme is Publishable Mag. I have a JPEG that I’ve cropped in Photoshop to the suggested 1900×200 px format. I upload it via the ‘header image’ customize tab but the published header picture comes out as a more cropped version of the upper left portion of the picture. The website is:

    https://www.medicalpracticegeek.com

    FYI, I’ve seen other posts that suggested altering code, which I know absolutely zero about and have zero comfort with. Are there plug-ins for this sort of thing? Thank you so much!

    MPG

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • If the theme supports header images, it adds some code to indicate to WordPress what size and other options for the header image option. Otherwise, core WordPress uses its defaults. That theme says it does custom header, so whatever is happening is because of the theme.
    I suggest you ask the theme developer what is supposed to be happening.
    https://www.ads-software.com/support/theme/publishable-mag

    Moderator t-p

    (@t-p)

    Try adding background-size: 100% in this CSS rule:

    #site-header {
    background-image: url(‘https://www.medicalpracticegeek.com/wp-content/uploads/2018/09/Untitled_Panorama1-copy.jpg’);
    background-size: 100%;
    }

    Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

    A custom CSS editor (usually titled Additional CSS) is included in the Customizer as of WordPress 4.7 specifically for this purpose.

    As an alternative, especially if you intend to modify more than just CSS, create a child theme.

    Thread Starter mpg1002

    (@mpg1002)

    Thank you both. @joyously thank you – I posted the question to that forum. @t-p thank you – I know zero about code, a custom CSS editor, etc. but I did see at the bottom of the customize appearance tab there was something called “additional CSS” as you mentioned. I copied and pasted:

    #site-header {
    background-image: url(‘https://www.medicalpracticegeek.com/wp-content/uploads/2018/09/Untitled_Panorama1-copy.jpg’);
    background-size: 100%;
    }

    into the lines at the bottom and the picture disappeared/went black. Not sure if I am supposed to enter all of this in its entirely or just add the “background-size: 100%” somewhere. Again, zero background here or coding knowledge. I’m sure this looks like such a childish issue, but I thank you for your help. Any other thoughts would be appreciated, but I’ll look into the child theme you mentioned (though that looks daunting as well).

    MPG

    I would remove the CSS code that t-p gave you, since the theme should do it for you. That code specifies the image, so if you tried to change it in Customizer, you would have more trouble.
    Part of specifying the image is cropping it if desired, so you should make adjustments there, or wait for the theme guys to help you out.

    Thread Starter mpg1002

    (@mpg1002)

    @joyously I definitely deleted it. I tried multiple different ways of posting the image, including cropping it with their tool prior to publishing. Thing was, their crop tool exactly outlined my image because I had already cut it to their recommended specs. I’ll see what the theme people say. Thanks again.

    MPG

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