Header Dimensions


#1

I’m having a custom banner designed for my website and he’s asking for the header dimensions. What are the dimensions for this theme? Am I even able to add a custom header to this theme? If not, can I use the image he’s designing as a logo in this theme and have it stretch across the width of the header space? Please advise as to how to use the custom design image. Thank you in advance for any help.


#2

Hi,

There is no option to add an image to the header, but you can add it using custom css code.

Following is the css code to add an image to the header:

.site-header {
    background: url(YOUR IMAGE URL) no-repeat scroll center center;
    background-size: cover;
    width: 100%;
}

you can put the code in above on the styles.css within your child theme, or you can also use simple custom css plugin.


#3

Thanks for responding, Awan! So, what are the dimensions of the header space? My graphics designer wants to know I guess so that he can give me the proper sized image.

What is custom css plugin and how is it different from child theme? When you update the theme the changes won’t get lost with the custom css plugin?


#4

Okay, I wonder if I’m using the proper term. The space below the top menu bar, the site identity with the “site title” and “tagline,” is that a header space or logo space? That’s the space I’m having the custom image designed for.


#5

you can set the dimension of the header image to: 1920 x 133.

custom css plugin is the plugin to place your custom css, every css code that you place in those plugin will not removed when you update your theme.

But, you already have a child theme now, so you can put the css code directly to the styles.css file


#6

Yeah, you can also upload your logo from customize > general, and it will replace the site title and site description in the header area


#7

Okay let me make sure I understand correctly. I can upload an image with dimensions 1920 x 133 from customize>general to replace the site title & description with the custom header that’s being designed?


#8

1920 x 133 is the dimension of the image if you are using the css code in above. But if you upload your image from customize > general, the dimension is 980 x 133

I am sorry for not complete on give you the instruction :slight_smile:


#9

Okay, so after I add the css code above, I can add a logo image that is 1920 x 133? How do I upload the image then after I add the code?


#10

You can upload your image from the dashboard: Media > Library
Then you can get the URL of the uploaded image by click the image to see the detail of the image and copy the URL http://prntscr.com/9r46ce


#11

Okay, I’ll try that after the custom logo is done. Thank you again for all your help.