I’m just setting up my site, and trying to add a image to the top header section.
The instructions in ‘Settings > Branding’ say;
Use a wide rectangular image with a height of 120 and an aspect ratio greater than 3:1
so I’m using a png image sized 120px x 2000px, and was expecting it to be positioned to the left, and completely fill the header contained, but it doesn’t!! What have I done wrong?
From your screenshot, it looks like the image is correctly set on the left side. The Discourse header is displayed inside of a wrap div that has its width constrained. That is the reason that the logo is not fully to the left of the screen.
The instructions ask you to upload an image with a height of 120px, but when that image is displayed on Discourse, its height is reduced to approximately 31px. This means that the width of the image you uploaded will be divided by 4 when it is displayed on your site. It looks to me that the logo in your screenshot is approximately 660px, so I think it’s being displayed correctly.
If you have a narrower logo available, it might be good to give that a try and see how it looks.
Thanks Simon, I’d like the logo to completely fill the header, is that possible?
Even with a reduced image width, it is still constrained to a height of 31px and doesn’t look good.
It’s theoretically possible to fill most of the header, but will probably take some trial and error to get it right. You may find that you have to adjust your site’s CSS in order to do it. If you are interested in that, have a look at Beginner’s guide to using Discourse Themes and Developer’s guide to Discourse Themes.
Looking at our instructions for the logo setting, I think we should give an optimal aspect ratio. The logo in your screenshot does have an aspect ratio of greater than 3:1, but it seems to me that it is too wide of a logo. If you look at the logo that’s used on the Discourse Meta forum, you’ll see that it is displayed at approximately 150 x 40px. That seems like the ideal aspect ratio to me - slightly less than 4:1.
To achieve your effect, you might want to use some CSS.
Example:
.d-header .contents {
background: linear-gradient(to bottom, rgba(36,66,183,0) 0%,rgba(36,66,183,1) 40%,rgba(36,66,183,1) 60%,rgba(36,66,183,0) 100%);
}
I think that you are missing my objective. It’s not the effect, it’s filling the header box with an image, which is currently constrained to a height of 31px.
Can you link here your image?
I understand your issue then. However, if achieving what you want this an image is difficult, why not upload the logo without the gradient, and add the gradient via CSS? Seems easier and straightforward to me. 
But maybe your final image won’t be achievable with css?
Yes, correct.
I have just found this forum which seems to achieve what I want.
Further searching, I’ve found the css they have used, but I’m new here, and still trying to grasp how to add CSS to make such changes.
On your example site, they use 2 images.
A logo with transparent background, and a background image on d.header:
.d-header {
background: url("https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg") center center;
}
Yes, that seems to be the way forward 
I just need to understand now how to add that CSS.
I’m using the ‘Shades of blue’ theme.
I’m working my way through the Discourse guides, but I maybe need to read some more.
To add CSS, I think the best way is create a new theme component, to prevent your modification from being overwritten if you update your current theme.
Go in your admin panel -> customize -> themes -> components -> install -> Create new
Thank you, I was able to follow your tutorial above, and I am almost there!
You have helped me understand a little more about how things work with Discourse.
I’m going to spend some time tonight and learn a little more.
Thanks again for your help
With reference to the talksurf header;
I can see where the background image originates, but not the ‘talksurf’ image on the left, which is floating above the background image.
Adding ‘talksurf’ as a image in Settings>Branding>logo results in a much smaller image as Discourse shrinks it from 120px original height to just 31px. Talksurf is a lot more than 31px high
The Talksurf logo is a regular logo, uploaded in the admin brand section.
I uploaded the same exact logo and got a 40px tall logo without any customization:
So I don’t understand how it would be 31px on your forum. Do you have a link to it so I can look at the HTML and CSS?
Also, this is how to find out how they customized their header:
Thanks for helping, the URL is https://yas-cfr.discourse.group/ and as you can see, using the same logo as you, I get a height of 35px which is different to yours (40px).
The size of the talksurf image is 322 x 63px.
You need to remove this CSS rule that you have:
.d-header #site-logo {
max-height: 35px !important;
}
Maybe it’s something written in your theme, so you need to overwrite it.
Note that because the rule uses an !important, you’ll have to add this as well in your own rule:
.d-header #site-logo {
max-height: none !important;
}Yes that’s it!!
I’ve made the change and now it’s size 40px - which will give me much more scope to create a more artistic header.
Thank you so much for your help (again!)
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.