# Card Hero Image Settings - Cover, Fit, Contain

**URL:** <https://community.noloco.io/t/card-hero-image-settings-cover-fit-contain/1681>\
**Category:** Feature Requests\
**Created:** [February 5, 2025, 8:56pm UTC](https://community.noloco.io/t/card-hero-image-settings-cover-fit-contain/1681 "2025-02-05T20:56:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brandi\_Bullock](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/brandi_bullock/32/73_2.png) [@Brandi\_Bullock](https://community.noloco.io/u/Brandi_Bullock)\
**Post date:** [February 5, 2025, 8:56pm UTC](https://community.noloco.io/t/card-hero-image-settings-cover-fit-contain/1681/1 "2025-02-05T20:56:41Z")

</div>

Would love additional options for the Card Hero Image that make it easy to set whether the image should be cover, fit, or contain without using custom css.

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/a/a211db2d552ee6e3a5afb9625c1e81364e73e6cd.jpeg)

---

<div class="post-metadata">

**Author:** ![seanvosler](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/seanvosler/32/698_2.png) [@seanvosler](https://community.noloco.io/u/seanvosler)\
**Post date:** [February 5, 2025, 9:24pm UTC](https://community.noloco.io/t/card-hero-image-settings-cover-fit-contain/1681/2 "2025-02-05T21:24:42Z")

</div>

Here’s a quick and dirty CSS fix…

If you want to change ALL `cards with an image where the image is set as the hero image` like your example (again, will change everywhere)…

**Default**

 ![Screenshot 2025-02-05 at 1.25.39 PM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/9/9dcea152235044e0cffd5071d92c51626132e40a.png)

**set to Contain**

 ![Screenshot 2025-02-05 at 1.25.48 PM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/9/9f09dec4221edd70bd3182cf967cce9e226da769.png)

Add this css to your custom code area in noloco:

```auto
<style>
/*all card cover images to contain*/
[data-testid="collection-record"] .bg-cover.bg-center{
  background-size: contain!important;
}
</style>

```

More advanced, if you want it JUST for a specific ‘view’ (that is, a specific page you set up with your card collection you need to find the “view” class of that “page”…

Right click on the page with the records, select “inspect elements” and in the ‘elements’ tab use the search bar to search: `data-testid="view-collection"` - you need a class in this div that looks like: `view-IurNdu5Xd`:

 ![Screenshot 2025-02-05 at 1.23.17 PM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/b/bcf996f6f1e43c1fbd91640b4b99cdefb6dd7fb2.png)

Then you can modify the above script to work on this specific ‘page’…

```auto
<style>
.view-XXXXXXXX [data-testid="collection-record"] .bg-cover.bg-center{
  background-size: contain!important;
}
</style>

```

Hope that helps!

---

<div class="post-metadata">

**Author:** ![Brandi\_Bullock](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/brandi_bullock/32/73_2.png) [@Brandi\_Bullock](https://community.noloco.io/u/Brandi_Bullock)\
**Post date:** [February 5, 2025, 9:59pm UTC](https://community.noloco.io/t/card-hero-image-settings-cover-fit-contain/1681/3 "2025-02-05T21:59:30Z")

</div>

Thanks Sean!! I’ve got the css working, mine looks similar to your suggestion, just added `background-repeat: no-repeat !important;` to prevent it from repeating. Just hoping they’ll put the quick toggle on the roadmap.