# Editing hero image in css

**URL:** <https://forum.ghost.org/t/editing-hero-image-in-css/16848>\
**Category:** Developer help\
**Created:** [September 1, 2020, 5:00pm UTC](https://forum.ghost.org/t/editing-hero-image-in-css/16848 "2020-09-01T17:00:18Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sage](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/sage/32/9597_2.png) [@Sage](https://forum.ghost.org/u/Sage)\
**Post date:** [September 1, 2020, 5:00pm UTC](https://forum.ghost.org/t/editing-hero-image-in-css/16848/1 "2020-09-01T17:00:18Z")

</div>

Hi everyone,

My site URL is [https://www.weact.chat/](https://www.weact.chat/) and I am using the Penang theme. I’m trying to span the hero image across the entire grey box up top.

The theme developer advised to change the css to

```
 .c-hero {
    background-image: url(/image_path/image.png);
}

```

when I input the information it now looks like this

```
.c-hero {
    background-image: url(/https://www.weact.chat/content/images/2020/08/weact-header3.png/weact-header3.png);
    }

```

Still no changes so I assume I am doing something wrong here. Please help!

Thanks :)

---

<div class="post-metadata">

**Author:** ![saleheen](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/saleheen/32/9234_2.png) [@saleheen](https://forum.ghost.org/u/saleheen)\
**Post date:** [September 1, 2020, 5:38pm UTC](https://forum.ghost.org/t/editing-hero-image-in-css/16848/2 "2020-09-01T17:38:29Z")

</div>

> [@Sage](#):
>
> `url(/https://www.weact.chat/content/images/2020/08/weact-header3.png/weact-header3.png);`

Hi,

If you want the entire Header to use a Background then you can paste the following in the Code injection \> Site Head

```auto
<style>
.c-hero {
    padding: 48px 0;
    background-image: url(/content/images/2020/08/weact-header3.png);
    background-position: center;
    background-size: cover;
}
.c-hero-image {
    visibility: hidden;
}
</style>

```

& then you will get something like below

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

---

<div class="post-metadata">

**Author:** ![Sage](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/sage/32/9597_2.png) [@Sage](https://forum.ghost.org/u/Sage)\
**Post date:** [September 1, 2020, 5:50pm UTC](https://forum.ghost.org/t/editing-hero-image-in-css/16848/3 "2020-09-01T17:50:13Z")

</div>

> [@saleheen](#):
>
> ```auto
> <style>
> .c-hero {
> padding: 48px 0;
> background-image: url(/content/images/2020/08/weact-header3.png);
> background-position: center;
> background-size: cover;
> }
> .c-hero-image {
> visibility: hidden;
> }
> </style>
> 
> ```

This is precisely what I was looking for. Thank you so much @saleheen!

I want to zoom out so that the whole image is visible and the edges do not get cut off, would I do this here:

```
padding: 48px 0;

```

Or somewhere else?

Additionally, the subscribe button interferes with the image. In Code Injection can I also make this smaller and adjusted to the bottom left hand corner, for instance?

---

<div class="post-metadata">

**Author:** ![saleheen](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/saleheen/32/9234_2.png) [@saleheen](https://forum.ghost.org/u/saleheen)\
**Post date:** [September 1, 2020, 5:55pm UTC](https://forum.ghost.org/t/editing-hero-image-in-css/16848/4 "2020-09-01T17:55:07Z")

</div>

Yes… to make the bg image more visible you need to increase the height of the element it can be done by increasing the padding or setting up an `height` of the div…

for the subscription thing u can also do that with css … but you need to take care how it will look like on mobile screens as well

---

<div class="post-metadata">

**Author:** ![Sage](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/sage/32/9597_2.png) [@Sage](https://forum.ghost.org/u/Sage)\
**Post date:** [September 1, 2020, 6:09pm UTC](https://forum.ghost.org/t/editing-hero-image-in-css/16848/5 "2020-09-01T18:09:46Z")

</div>

Okay I will play around with that.

Just one other question—where did you get the following from so I know how to replicate if I ever want to use a different image?

> content/images/2020/08

---

<div class="post-metadata">

**Author:** ![saleheen](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/saleheen/32/9234_2.png) [@saleheen](https://forum.ghost.org/u/saleheen)\
**Post date:** [September 1, 2020, 6:49pm UTC](https://forum.ghost.org/t/editing-hero-image-in-css/16848/6 "2020-09-01T18:49:51Z")

</div>

Okay you will upload a different cover image if you want to change the image & then from any browsers developer tool you can the the exact path of the image

---

<div class="post-metadata">

**Author:** ![Sage](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/sage/32/9597_2.png) [@Sage](https://forum.ghost.org/u/Sage)\
**Post date:** [December 5, 2020, 2:36am UTC](https://forum.ghost.org/t/editing-hero-image-in-css/16848/7 "2020-12-05T02:36:18Z")

</div>

Hi @saleheen! You helped me figure this out awhile back. The issue I’ve come across is that it does not resize on the mobile version. Any suggestions? Would I need to change the code for this?

---

<div class="post-metadata">

**Author:** ![saleheen](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/saleheen/32/9234_2.png) [@saleheen](https://forum.ghost.org/u/saleheen)\
**Post date:** [December 5, 2020, 4:24pm UTC](https://forum.ghost.org/t/editing-hero-image-in-css/16848/8 "2020-12-05T16:24:31Z")

</div>

Hi,  
Since its used as background image… its using the div width & Hight … So some css fix may be needed… Can you send me a screenshot? so that i can give you the codes for mobile screen…

btw i tried to visit your site but your ssl seems expired

---

<div class="post-metadata">

**Author:** ![Sage](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/sage/32/9597_2.png) [@Sage](https://forum.ghost.org/u/Sage)\
**Post date:** [December 6, 2020, 10:24pm UTC](https://forum.ghost.org/t/editing-hero-image-in-css/16848/9 "2020-12-06T22:24:59Z")

</div>

Oh yes, it is actually [https://weact.chat/](https://weact.chat/) now on the Digital Ocean server. Here is what it looks like on my mobile phone.

 ![IMG_0465.PNG](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/4/4940096a6668fbc7e1332f1ab66a3471511c6d74.jpeg)