# How to have a page look like the home page

**URL:** <https://forum.ghost.org/t/how-to-have-a-page-look-like-the-home-page/23574>\
**Category:** Themes\
**Created:** [June 18, 2021, 8:01pm UTC](https://forum.ghost.org/t/how-to-have-a-page-look-like-the-home-page/23574 "2021-06-18T20:01:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mr\_scary](https://avatars.discourse-cdn.com/v4/letter/m/7ea924/32.png) [@mr\_scary](https://forum.ghost.org/u/mr_scary)\
**Post date:** [June 18, 2021, 8:01pm UTC](https://forum.ghost.org/t/how-to-have-a-page-look-like-the-home-page/23574/1 "2021-06-18T20:01:05Z")

</div>

My home page is displaying its background from the very top of the screen and down a certain amount. This is fine.

Now I want a **page** to look similarly (but with a different background). Since my home page is displaying how I want my new page (`storage` with slug ‘storage’) to appear I copied `home.hbs` to `page-:storage.hbs` (and restarted Ghost) but this doesn’t do anything when I reload my page in the browser. The page’s image is shown separately with whitespace around it.

One difference between Home and pages is that, in the UI, for the former you can feed a background in a seemingly special way (“publication cover”) whereas a page gets it in a different way (“upload page image”).

I feel if I can get this question answered I will learn a lot about how Ghost works.

---

<div class="post-metadata">

**Author:** ![jeff](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeff/32/4900_2.png) [@jeff](https://forum.ghost.org/u/jeff)\
**Post date:** [June 19, 2021, 11:01am UTC](https://forum.ghost.org/t/how-to-have-a-page-look-like-the-home-page/23574/2 "2021-06-19T11:01:09Z")

</div>

The template filename should probably be: `page-storage.hbs`

When the docs say `page-:slug.hbs` they want you to change all of `:slug` to your page slug - i.e. the `:` is there to remind you that `slug` is not a literal.

---

<div class="post-metadata">

**Author:** ![jeff](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jeff/32/4900_2.png) [@jeff](https://forum.ghost.org/u/jeff)\
**Post date:** [June 19, 2021, 11:04am UTC](https://forum.ghost.org/t/how-to-have-a-page-look-like-the-home-page/23574/3 "2021-06-19T11:04:35Z")

</div>

also, given what you are trying to do, you should probably:

1. start with a copy of `page.hbs` rather than `home.hbs`
2. carefully incorporate the styling changes that you want from `home.hbs`

The `home.hbs` is designed to show you an index which contains details of many `posts`.

The `page.hbs` is designed to show you a single `page`.

---

<div class="post-metadata">

**Author:** ![mr\_scary](https://avatars.discourse-cdn.com/v4/letter/m/7ea924/32.png) [@mr\_scary](https://forum.ghost.org/u/mr_scary)\
**Post date:** [June 19, 2021, 8:14pm UTC](https://forum.ghost.org/t/how-to-have-a-page-look-like-the-home-page/23574/4 "2021-06-19T20:14:00Z")

</div>

Okay.

This is the contents of `home.hbs` (actually copied from `index.hbs`; there was no `home.hbs` originally):

```plaintext
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

<div class="site-header-content">
    {{#if @site.cover_image}}
        {{!-- This is a responsive image, it loads different sizes depending on device
        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
        <img class="site-header-cover"
            srcset="{{img_url @site.cover_image size="s"}} 300w,
                    {{img_url @site.cover_image size="m"}} 600w,
                    {{img_url @site.cover_image size="l"}} 1000w,
                    {{img_url @site.cover_image size="xl"}} 2000w"
            sizes="100vw"
            src="{{img_url @site.cover_image size="xl"}}"
            alt=""
        />  
    {{/if}}     
    <h1 class="site-title">
        {{#if @site.logo}}
            <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
        {{else}}
            {{@site.title}}
        {{/if}} 
    </h1>   
    <p>{{@site.description}}</p>
</div>  
    
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
    <div class="inner posts">
        
        <div class="post-feed">
            {{#foreach posts}}

                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                {{> "post-card"}}

            {{/foreach}}
        </div>

    </div>
</main>

```

The portion that can possibly influence the top “background” image is (minus the comment):

```plaintext
    {{#if @site.cover_image}}
        <img class="site-header-cover"
            srcset="{{img_url @site.cover_image size="s"}} 300w,
                    {{img_url @site.cover_image size="m"}} 600w,
                    {{img_url @site.cover_image size="l"}} 1000w,
                    {{img_url @site.cover_image size="xl"}} 2000w"
            sizes="100vw"
            src="{{img_url @site.cover_image size="xl"}}"
            alt=""
        />

```

It seems to say: if `@site.cover_image` is present then display it using a “class” of `site-header-cover`.

Where is the documentation for `img_url`? How does one know what values can be used? This [page](https://ghost.org/docs/themes/helpers/img_url/) is incomplete. Notably, it does not mention `@site.cover_image`. I did eventually find this [page](https://ghost.org/docs/themes/helpers/site/) that does mention `@site.cover_image` and says it represents “the site cover image from general settings”. So this does not help me.

Where are image “classes” documented (e.g. the `site-header-cover` above)?

What “property” represents the (upload) “page image” for a **page**?

Or must I hardcode a path to an image? Where is that method documented?