Custom Header Size on GK Portfolio

I could be wrong, but I don’t think there is a header image in the theme. And it’s hard to think what you have in mind. Is it the background image perhaps that you would like to change? Could you be a little more specific? Sharing your site’s address might be helpful too (especially in case there is a header image).

It is exactly as @axel13 mentioned – there is no header image in this template.

Hi again!

The site is: https://www.jessicadelatorre.com/

I checked and it is not the background image, it is actually the Logo Image. I just called it header coz it is on the top.

My question is if there a way to customize the width and height of the Logo Image?

Thank a lot!

You’re right, Jess… I only looked quickly (a nice theme it is) and didn’t see the option yet to add a logo.

I would suggest to install a plugin like Simple Custom CSS, or the one included in JetPack to add custom CSS to your site.

Once activated you should see a text field, as illustrated in the screenshot here, in which you can add f.ex. the following:

.site-header {
height: 130px;
}
.home-link > img {
max-height: 120px;
}

.site-header increases the available height.
.home-link > img increases the image size.

In case nothing would change, you can add ‘ !important’ after the px, f.ex.

.site-header {
height: 130px !important;
}

Do note that the above is not the exact size of your logo, because it is not very sharp at height 150px. I would recommend to replace it with a .png instead. Currently it is a .jpg, which is good for photos, but not for illustrations.

I hope this helps!

Hi Alex,

Thank you very much! ??
I installed the plugin and did as you said, works brilliantly!
And I tried .png which also is much better.

Thanks again for your help!
Have a nice week.

I’m glad you are happy, but it’s not good now…

• Your image is way too large.
• PNG is only good for illustration, too heavy for photos. This will slow your site (= poor user experience, bad for SEO, terrible on mobiles) and give errors.
• On wide screens there is white space left and right of the image, on small screens there is space below the image. Make your browser window smaller (more narrow) to see what I mean, or see it @ mobiletest.me.

I think the best thing to do is to upload the logo and the image on the background seperately and to add the image as background. You can do so via CSS. I’ll try to guide stepwise, but I would need to try it myself to be sure…

1. Save your logo without background as PNG
— It’s probably a good idea to add the semi-transparent white rectangle to it too, so it will be positioned correctly.

2. Save your image as JPG with width: 1920px
— if the original image is higher than the one you have now, it might be good to make it a bit higher than it is now.

3. Upload your logo as you did.

4. Upload the background image in your media.

5. Change your .site-header in your custom CSS as followed, where ‘your-header-image.jpg’ is the image you want on the background.

.site-header {
height: 350px;
background: url(/wp-content/uploads/2015/01/your-header-image.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

I think this will do the trick, but I’ll be back to see the result.

Hi Alex! Thanks a lot!

Yeah I noticed the header (logo) loaded very slow. :/

I had the idea of making the header look like on theme “Snaps” but I noticed that it really doesn’t work with GK Portfolio as this theme is much cleaner is minimalistic.

I also tried using the black n white image as background but I didn’t like it, it ended up being too much going on. But I will try with other images and try to make them look softer with Photoshop.

Meanwhile I will use the first code you gave me to make the logo/header be little bit bigger that it was originally and then use the code with background to try other images.

Thanks a lot for you help! ??

Good choice… no unnecessary load, adds more visibility to your logo & draws the attention to your content. Less is more. ??

Thanks again. ??