# Hero Help: Pennag Theme

**URL:** <https://forum.ghost.org/t/hero-help-pennag-theme/23309>\
**Category:** Developer help\
**Created:** [June 6, 2021, 11:26pm UTC](https://forum.ghost.org/t/hero-help-pennag-theme/23309 "2021-06-06T23:26:14Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tim\_P](https://avatars.discourse-cdn.com/v4/letter/t/a8b319/32.png) [@Tim\_P](https://forum.ghost.org/u/Tim_P)\
**Post date:** [June 6, 2021, 11:26pm UTC](https://forum.ghost.org/t/hero-help-pennag-theme/23309/1 "2021-06-06T23:26:14Z")

</div>

Hey all, I am Brand New to Ghost and am very much a beginner at coding, so please have some mercy.

I’m trying cusomtize the Hero image to have a plain background color, text and sign up on the left and an image on the right.

What I’ve been able to do is change the hero container color using code injection:

.c-hero\_\_container { padding: 0px 0; background-color: rgba(255, 0, 0, 0.3); background-position: center; background-size: cover; }

Which gets me this:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/0/0f00341368bfe90067f9378d06123b0188d5fd42.jpeg)

So what I need to do is get rid of the Grey stylized hero that sits underneath the hero color.

Any help is much appreciated!

---

<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:32pm UTC](https://forum.ghost.org/t/hero-help-pennag-theme/23309/2 "2021-06-06T23:32:01Z")

</div>

Add this to code injection

```auto
.c-hero {
    margin-bottom: 32px;
    background-color: var(--bg-gray);
    background-image: var(--bg-gradient);
}

```

and change `backgroud-color` and `background-image` according to your preferences.

---

<div class="post-metadata">

**Author:** ![Tim\_P](https://avatars.discourse-cdn.com/v4/letter/t/a8b319/32.png) [@Tim\_P](https://forum.ghost.org/u/Tim_P)\
**Post date:** [June 6, 2021, 11:43pm UTC](https://forum.ghost.org/t/hero-help-pennag-theme/23309/3 "2021-06-06T23:43:06Z")

</div>

> [@hkalant](#):
>
> ```auto
> .c-hero {
> margin-bottom: 32px;
> background-color: var(--bg-gray);
> background-image: var(--bg-gradient);
> }
> 
> ```

What if I don’t want any image? I just want the background to be one solid color?

---

<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:46pm UTC](https://forum.ghost.org/t/hero-help-pennag-theme/23309/4 "2021-06-06T23:46:00Z")

</div>

```auto
.c-hero {
    margin-bottom: 32px;
    background-color: #put-your-solid-colour-here;
    background-image: none;
}

```

---

<div class="post-metadata">

**Author:** ![Tim\_P](https://avatars.discourse-cdn.com/v4/letter/t/a8b319/32.png) [@Tim\_P](https://forum.ghost.org/u/Tim_P)\
**Post date:** [June 6, 2021, 11:47pm UTC](https://forum.ghost.org/t/hero-help-pennag-theme/23309/5 "2021-06-06T23:47:42Z")

</div>

Perfect! Thank you!

One last question; since I am now going with a darker solid color on the hero, I need to change the font to white. Is that a Code Injection as well? Thanks again for the help!

---

<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 7, 2021, 1:16pm UTC](https://forum.ghost.org/t/hero-help-pennag-theme/23309/6 "2021-06-07T13:16:38Z")

</div>

Hi,

You will need to include the following in the code injection:

```auto
color: #put-your-text-color-code-here;

```

And you will need to put it either in `.c-hero` or `.c-hero__container`.

I’m not sure what you want it to look like, so I don’t know in which of the two it should go.

---

<div class="post-metadata">

**Author:** ![Tim\_P](https://avatars.discourse-cdn.com/v4/letter/t/a8b319/32.png) [@Tim\_P](https://forum.ghost.org/u/Tim_P)\
**Post date:** [June 7, 2021, 4:04pm UTC](https://forum.ghost.org/t/hero-help-pennag-theme/23309/7 "2021-06-07T16:04:42Z")

</div>

Got it, thanks again!