# Resize images in Headline home page

**URL:** <https://forum.ghost.org/t/resize-images-in-headline-home-page/59168>\
**Category:** Themes\
**Created:** [August 1, 2025, 2:22pm UTC](https://forum.ghost.org/t/resize-images-in-headline-home-page/59168 "2025-08-01T14:22:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cowgirl](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cowgirl/32/26746_2.png) [@Cowgirl](https://forum.ghost.org/u/Cowgirl)\
**Post date:** [August 1, 2025, 2:22pm UTC](https://forum.ghost.org/t/resize-images-in-headline-home-page/59168/1 "2025-08-01T14:22:30Z")

</div>

i am still fiddling with this theme, on the phone this solution worked [Changing look and feel of Headline theme](https://forum.ghost.org/t/changing-look-and-feel-of-headline-theme/54403)

But is there anyway I can use some code snippet to make the images look more as in source than they do in those tiny sizes out of the box in headline when on a computer?

I also like to change the back ground colour but am I blind that cannot find it in the theme custom tool in my control panel?

 ![Screenshot 2025-08-01 at 16.13.43](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/d/0/d0ab20f66860192af0c911f3167761d29a7469b7.jpeg)

 ![Screenshot 2025-08-01 at 16.12.55](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/c/7/c7565897d83389dbc4c48ea67c429ef32b61020a.jpeg)

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [August 1, 2025, 2:48pm UTC](https://forum.ghost.org/t/resize-images-in-headline-home-page/59168/2 "2025-08-01T14:48:46Z")

</div>

Headline doesn’t have a color change setting. You’d have to use CSS. (In code injection)

You could definitely resize the images in headline with code injection, and quite possibly restack them, too, depending on exactly how the page is built.

This is probably an hour job for a developer, but too big for me to dig into for free, sorry. Crazy busy this week.

If you prompt an LLM to give you some css that restyles the page background, I’d guess that’ll work. The card rearranging is going to be harder to prompt - you’d need to give the LLM access to the current HTML (and maybe styles), and I’m not sure any free plan has enough context window to pull it off.

---

<div class="post-metadata">

**Author:** ![Cowgirl](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cowgirl/32/26746_2.png) [@Cowgirl](https://forum.ghost.org/u/Cowgirl)\
**Post date:** [August 1, 2025, 2:58pm UTC](https://forum.ghost.org/t/resize-images-in-headline-home-page/59168/3 "2025-08-01T14:58:16Z")

</div>

It is more the size than re-stacking them that is of interest, I’ll keep looking 🙂

---

<div class="post-metadata">

**Author:** ![Cowgirl](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cowgirl/32/26746_2.png) [@Cowgirl](https://forum.ghost.org/u/Cowgirl)\
**Post date:** [August 2, 2025, 2:26pm UTC](https://forum.ghost.org/t/resize-images-in-headline-home-page/59168/4 "2025-08-02T14:26:21Z")

</div>

Using this code the container is bigger and the smaller images got tall, but skinny like skyscrapers LOL Not sure how to fix that though 😑

```auto
<style>

/* Adjust the card image container height */
.gh-topic-grid .gh-card-image {
    height: 250px !important;
    position: relative;
    overflow: hidden;
}  

/* Adjust the image itself to fill the new container */
.gh-topic-grid .gh-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute;
    top: 0;
    left: 0;
}

/* Optional: add space between cards */
.gh-topic-grid .gh-card {
    margin-bottom: 2rem;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [August 2, 2025, 2:48pm UTC](https://forum.ghost.org/t/resize-images-in-headline-home-page/59168/5 "2025-08-02T14:48:55Z")

</div>

it’d be a lot easier to troubleshoot with a link to your site.

---

<div class="post-metadata">

**Author:** ![VicTheGreek](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/victhegreek/32/37097_2.png) [@VicTheGreek](https://forum.ghost.org/u/VicTheGreek)\
**Post date:** [August 3, 2025, 9:19pm UTC](https://forum.ghost.org/t/resize-images-in-headline-home-page/59168/6 "2025-08-03T21:19:07Z")

</div>

Hi, maybe changing this

> [@Cowgirl](#):
>
> `object-fit: cover !important;`

to one of these:

`object-fit: contain !important;`

`object-fit: fill !important;`

`object-fit: scale-down !important;`

If you have images with different aspect ratios would be more complicated to manage them.