# Change header background colour

**URL:** <https://forum.ghost.org/t/change-header-background-colour/23268>\
**Category:** Themes\
**Created:** [June 4, 2021, 2:44pm UTC](https://forum.ghost.org/t/change-header-background-colour/23268 "2021-06-04T14:44:05Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Conor](https://avatars.discourse-cdn.com/v4/letter/c/9d8465/32.png) [@Conor](https://forum.ghost.org/u/Conor)\
**Post date:** [June 4, 2021, 2:44pm UTC](https://forum.ghost.org/t/change-header-background-colour/23268/1 "2021-06-04T14:44:06Z")

</div>

How do you change the colour of this

 ![Screenshot 2021-06-04 at 15.42.52](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/5/5e64954cbfb0c3550461f1fed6b8e08d87f3dc18.png)

---

<div class="post-metadata">

**Author:** ![hkalant](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/hkalant/32/12905_2.png) [@hkalant](https://forum.ghost.org/u/hkalant)\
**Post date:** [June 5, 2021, 4:49pm UTC](https://forum.ghost.org/t/change-header-background-colour/23268/2 "2021-06-05T16:49:06Z")

</div>

1. Go to **Ghost Admin**.
2. Click **Settings** cog.
3. Click **Branding**.
4. Change the _accent colour_ top left

---

<div class="post-metadata">

**Author:** ![Conor](https://avatars.discourse-cdn.com/v4/letter/c/9d8465/32.png) [@Conor](https://forum.ghost.org/u/Conor)\
**Post date:** [June 5, 2021, 5:30pm UTC](https://forum.ghost.org/t/change-header-background-colour/23268/3 "2021-06-05T17:30:03Z")

</div>

@hkalant I don’t want to change the accent color

---

<div class="post-metadata">

**Author:** ![Conor](https://avatars.discourse-cdn.com/v4/letter/c/9d8465/32.png) [@Conor](https://forum.ghost.org/u/Conor)\
**Post date:** [June 5, 2021, 7:07pm UTC](https://forum.ghost.org/t/change-header-background-colour/23268/4 "2021-06-05T19:07:11Z")

</div>

@hkalant is there a case way

---

<div class="post-metadata">

**Author:** ![hkalant](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/hkalant/32/12905_2.png) [@hkalant](https://forum.ghost.org/u/hkalant)\
**Post date:** [June 5, 2021, 8:10pm UTC](https://forum.ghost.org/t/change-header-background-colour/23268/5 "2021-06-05T20:10:43Z")

</div>

Put this in your code injection:

```auto
.gh-head, .site-header-content {
    color: #put-your-text-color-here;
    background: #put-your-background-color-here;
}

```

Add your own colours after the colons.

---

<div class="post-metadata">

**Author:** ![Conor](https://avatars.discourse-cdn.com/v4/letter/c/9d8465/32.png) [@Conor](https://forum.ghost.org/u/Conor)\
**Post date:** [June 5, 2021, 9:30pm UTC](https://forum.ghost.org/t/change-header-background-colour/23268/6 "2021-06-05T21:30:24Z")

</div>

Thanks so much

P.S I meant CSS by the way

---

<div class="post-metadata">

**Author:** ![Conor](https://avatars.discourse-cdn.com/v4/letter/c/9d8465/32.png) [@Conor](https://forum.ghost.org/u/Conor)\
**Post date:** [June 6, 2021, 10:45pm UTC](https://forum.ghost.org/t/change-header-background-colour/23268/7 "2021-06-06T22:45:03Z")

</div>

@hkalant On Mobile the Menu is a different color to the header how do you change it to match

---

<div class="post-metadata">

**Author:** ![hkalant](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/hkalant/32/12905_2.png) [@hkalant](https://forum.ghost.org/u/hkalant)\
**Post date:** [June 6, 2021, 11:02pm UTC](https://forum.ghost.org/t/change-header-background-colour/23268/8 "2021-06-06T23:02:14Z")

</div>

With this:

```auto
.home-template.gh-head-open .gh-head {
    background: #d3d3d3;
}

```