Editing hero image in css

Hi everyone,

My site URL is 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 :)

Hi,

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

<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

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?

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

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

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

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?

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

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