# Image not filling header container
**URL:** https://meta.discourse.org/t/image-not-filling-header-container/146484
**Category:** Support
**Created:** [April 1, 2020, 8:23pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484 "2020-04-01T20:23:31Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Paul-Reed](https://meta.discourse.org/u/Paul-Reed)
#### Post date: [April 1, 2020, 8:23pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/1 "2020-04-01T20:23:31Z")
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?
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [April 1, 2020, 9:04pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/2 "2020-04-01T21:04:27Z")
> [@Paul-Reed](#):
>
> 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!!
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.
---
### Author:  [@Paul-Reed](https://meta.discourse.org/u/Paul-Reed)
#### Post date: [April 1, 2020, 9:18pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/3 "2020-04-01T21:18:27Z")
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.
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [April 1, 2020, 9:39pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/4 "2020-04-01T21:39:44Z")
> [@Paul-Reed](#):
>
> I’d like the logo to completely fill the header, is that possible?
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](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) and [Developer’s guide to Discourse Themes](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648).
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.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 1, 2020, 9:44pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/5 "2020-04-01T21:44:43Z")
To achieve your effect, you might want to use some CSS.
Example:
```css
.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%);
}
```
---
### Author:  [@Paul-Reed](https://meta.discourse.org/u/Paul-Reed)
#### Post date: [April 1, 2020, 9:50pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/6 "2020-04-01T21:50:37Z")
> [@Canapin](#):
>
> To achieve your effect, you might want to use some CSS.
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.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 1, 2020, 9:52pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/7 "2020-04-01T21:52:43Z")
Can you link here your image?
---
### Author:  [@Paul-Reed](https://meta.discourse.org/u/Paul-Reed)
#### Post date: [April 1, 2020, 9:55pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/8 "2020-04-01T21:55:01Z")
Yes sure, it’s pretty basic at the moment - just a first step.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 1, 2020, 9:57pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/9 "2020-04-01T21:57:12Z")
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?
---
### Author:  [@Paul-Reed](https://meta.discourse.org/u/Paul-Reed)
#### Post date: [April 1, 2020, 10:06pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/10 "2020-04-01T22:06:05Z")
> [@Canapin](#):
>
> But maybe your final image won’t be achievable with css?
Yes, correct.
I have just [found this forum](https://forum.talksurf.com/) which seems to achieve what I want.
Further searching, [I’ve found the css they have used](https://github.com/ornithes/discourse-templates/tree/master/forum.talksurf), but I’m new here, and still trying to grasp how to add CSS to make such changes.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 1, 2020, 10:09pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/11 "2020-04-01T22:09:32Z")
On your example site, they use 2 images.
A logo with transparent background, and a background image on `d.header`:
```css
.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;
}
```
---
### Author:  [@Paul-Reed](https://meta.discourse.org/u/Paul-Reed)
#### Post date: [April 1, 2020, 10:26pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/12 "2020-04-01T22:26:31Z")
> [@Canapin](#):
>
> A logo with transparent background, and a background image on `d.header` :
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.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 1, 2020, 10:52pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/13 "2020-04-01T22:52:12Z")
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
Then click on **Add to all themes** -or manually pick theme(s)- then **edit CSS/HTML** :
And write your CSS in the CSS tab.
---
### Author:  [@Paul-Reed](https://meta.discourse.org/u/Paul-Reed)
#### Post date: [April 2, 2020, 9:14am UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/14 "2020-04-02T09:14:12Z")
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
---
### Author:  [@Paul-Reed](https://meta.discourse.org/u/Paul-Reed)
#### Post date: [April 7, 2020, 9:48am UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/15 "2020-04-07T09:48:25Z")
With [reference to the talksurf header](https://meta.discourse.org/t/how-upgrade-a-very-old-discourse-site/146846/10);
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
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 7, 2020, 10:53am UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/16 "2020-04-07T10:53:59Z")
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:
- Open [https://forum.talksurf.com/](https://forum.talksurf.com/)
- On your browser (I’ll take Chrome as an example), show the development tools by pressing F12.
- Click the selection arrow:
- Click the header:
- Look at the CSS on the right of your development tools:
The first rules aren’t the default one, they are custom. No obvious way to know that, you know it kinda empirically… By looking at the selectors, the SCSS file name, etc.
---
### Author:  [@Paul-Reed](https://meta.discourse.org/u/Paul-Reed)
#### Post date: [April 7, 2020, 7:13pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/17 "2020-04-07T19:13:51Z")
> [@Canapin](#):
>
> 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?
Thanks for helping, the URL is [https://yas-cfr.discourse.group/](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.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 7, 2020, 7:36pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/18 "2020-04-07T19:36:35Z")
You need to remove this CSS rule that you have:
```css
.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:
```css
.d-header #site-logo {
max-height: none !important;
}
```
---
### Author:  [@Paul-Reed](https://meta.discourse.org/u/Paul-Reed)
#### Post date: [April 7, 2020, 7:52pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/19 "2020-04-07T19:52:05Z")
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!)
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [May 7, 2020, 7:52pm UTC](https://meta.discourse.org/t/image-not-filling-header-container/146484/20 "2020-05-07T19:52:21Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.