# Khal Yereim hero-card contrast and CSS placement

**URL:** <https://jtechforums.org/t/khal-yereim-hero-card-contrast-and-css-placement/9405>\
**Category:** Web Development\
**Tags:** website, question\
**Created:** [April 27, 2026, 10:31pm UTC](https://jtechforums.org/t/khal-yereim-hero-card-contrast-and-css-placement/9405 "2026-04-27T22:31:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shalom\_Karr](https://jtechforums.org/user_avatar/jtechforums.org/shalom_karr/32/8264_2.png) [@Shalom\_Karr](https://jtechforums.org/u/Shalom_Karr)\
**Post date:** [April 27, 2026, 10:31pm UTC](https://jtechforums.org/t/khal-yereim-hero-card-contrast-and-css-placement/9405/1 "2026-04-27T22:31:07Z")

</div>

**Moderator context:** This CSS-placement and contrast question follows the [Khal Yereim display-layout review](https://jtechforums.org/t/9406). Keep the specific hero-card CSS discussion here.

* * *

> [@Website feedback](https://jtechforums.org/t/website-feedback/5039/179):
>
> > [@Khal Yereim display layout and schedule feedback](https://jtechforums.org/t/khal-yereim-display-layout-and-schedule-feedback/9406/5):
> >
> > Does it still look good?
> 
> Not sure if I understand what your asking, but the code I suggested looks good, all it does is make the background a bit darker so the words are more visible. Its called contrast and its very important

What part was your code suggestion for?  
`background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), url('img/shul.jpg');`

---

<div class="post-metadata">

**Author:** ![YourMenahel](https://jtechforums.org/user_avatar/jtechforums.org/yourmenahel/32/4575_2.png) [@YourMenahel](https://jtechforums.org/u/YourMenahel)\
**Post date:** [April 27, 2026, 11:31pm UTC](https://jtechforums.org/t/khal-yereim-hero-card-contrast-and-css-placement/9405/2 "2026-04-27T23:31:21Z")

</div>

> [@Shalom\_Karr](#):
>
> What part was your code suggestion for?

Lol I guess I thought you made it yourself but I realized after it was claude so u wouldnt know where to put it​🤣  
Inside `<body>`, third div from the top, inside that the top div who’s class is `.hero-card`, the css goes in there. You’ll see the original code which is slightly different rgb numbers so you can just swap it out.

 ![image](https://jtechforums.org/uploads/default/original/2X/4/44707f26a7fe71973676d40e066f905f89a96d2a.png)

---

<div class="post-metadata">

**Author:** ![Shalom\_Karr](https://jtechforums.org/user_avatar/jtechforums.org/shalom_karr/32/8264_2.png) [@Shalom\_Karr](https://jtechforums.org/u/Shalom_Karr)\
**Post date:** [April 27, 2026, 11:47pm UTC](https://jtechforums.org/t/khal-yereim-hero-card-contrast-and-css-placement/9405/3 "2026-04-27T23:47:37Z")

</div>

> [@Website feedback](https://jtechforums.org/t/website-feedback/5039/182):
>
> > [@Shalom\_Karr](#):
> >
> > What part was your code suggestion for?
> 
> Lol I guess I thought you made it yourself but I realized after it was claude so u wouldnt know where to put it​🤣  
> Inside `<body>`, third div from the top, inside that the top div who’s class is `.hero-card`, the css goes in there. You’ll see the original code which is slightly different rgb numbers so you can just swap it out.
> 
> ![image](https://jtechforums.org/uploads/default/original/2X/4/44707f26a7fe71973676d40e066f905f89a96d2a.png)

No, i know what you are saying, what part of the screen needs to be darker

---

<div class="post-metadata">

**Author:** ![YourMenahel](https://jtechforums.org/user_avatar/jtechforums.org/yourmenahel/32/4575_2.png) [@YourMenahel](https://jtechforums.org/u/YourMenahel)\
**Post date:** [April 28, 2026, 1:27am UTC](https://jtechforums.org/t/khal-yereim-hero-card-contrast-and-css-placement/9405/4 "2026-04-28T01:27:45Z")

</div>

Well it should be pretty obvious if you switched out the code, and either way I said before:

> [@Khal Yereim display layout and schedule feedback](https://jtechforums.org/t/khal-yereim-display-layout-and-schedule-feedback/9406/3):
>
> the main card, with the shul background

The first image is your version and the 2nd is my suggested version:

 ![](https://jtechforums.org/uploads/default/original/2X/9/9526c6349cd500874dd0b734416b77feb96c667e.jpeg)  
 ![](https://jtechforums.org/uploads/default/original/2X/f/f09929630cdd0e7080ce65b1578b553ca3e965bc.jpeg)

---

<div class="post-metadata">

**Author:** ![Shalom\_Karr](https://jtechforums.org/user_avatar/jtechforums.org/shalom_karr/32/8264_2.png) [@Shalom\_Karr](https://jtechforums.org/u/Shalom_Karr)\
**Post date:** [April 28, 2026, 3:26am UTC](https://jtechforums.org/t/khal-yereim-hero-card-contrast-and-css-placement/9405/5 "2026-04-28T03:26:27Z")

</div>

> [@Khal Yereim display layout and schedule feedback](https://jtechforums.org/t/khal-yereim-display-layout-and-schedule-feedback/9406/3):
>
> > [@Khal Yereim display layout and schedule feedback](https://jtechforums.org/t/khal-yereim-display-layout-and-schedule-feedback/9406/3):
> >
> > the main card, with the shul background
> 
> The first image is your version and the 2nd is my suggested version:
> 
> ![](https://jtechforums.org/uploads/default/original/2X/9/9526c6349cd500874dd0b734416b77feb96c667e.jpeg)

tbh I like my version better

---

<div class="post-metadata">

**Author:** ![YourMenahel](https://jtechforums.org/user_avatar/jtechforums.org/yourmenahel/32/4575_2.png) [@YourMenahel](https://jtechforums.org/u/YourMenahel)\
**Post date:** [April 28, 2026, 3:35am UTC](https://jtechforums.org/t/khal-yereim-hero-card-contrast-and-css-placement/9405/6 "2026-04-28T03:35:01Z")

</div>

> [@Shalom\_Karr](#):
>
> tbh I like my version better

There’s really not much difference beauty-wise, its just contrast. Whatever u want, tbh it doesnt really matter 🤷

---

<div class="post-metadata">

**Author:** ![YourMenahel](https://jtechforums.org/user_avatar/jtechforums.org/yourmenahel/32/4575_2.png) [@YourMenahel](https://jtechforums.org/u/YourMenahel)\
**Post date:** [April 28, 2026, 3:36am UTC](https://jtechforums.org/t/khal-yereim-hero-card-contrast-and-css-placement/9405/7 "2026-04-28T03:36:04Z")

</div>

> [@YourMenahel](#):
>
> its just contrast

For example look at “Monday, April 27, 2026” its much easier to see on the darker version, and while you _can_ read it on both for some older members of your shul you might want to switch it