Image for banner

Developer help
1

The tutorial does not explain how to configure in the: Settings >
Code injection > Site Header the application with the image only with background color.

I already tried putting the following:

 background-image: images/banner-background.jpg

 background-image: "images/banner-background.jpg".

 background-image: url({{asset "images/banner-background.jpg"}}})

The image is in the correct folder and nothing works. could someone help me?

Thank you in advance

2

Go to Settings > Code Injection, and paste the CSS into the header section…


<style>
.gh-banner {
  display: block;
  height: 90px;
  padding: 0 var(--gap);
  line-height: 1.3;
  background-color: #eeeff1; /* Banner background color */
  background-repeat: no-repeat;
  background-position: center;
}

.gh-banner-inner {
  display: flex;
…
3

Hello @mjw, thank you for your reply.

What you sent me is included in the tutorial, but my question is how to put the image instead of the background color.

Currently in the Settings > Code Injection I have this code:

<style>
.gh-banner {
  display: block;
  height: 90px;
  padding: 0 var(--gap);
  line-height: 1.3;
  background-color: #eeeff1; /* Banner background color */
  background-repeat: no-repeat;
  background-position: center;
}

.gh-banner-inner {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
}

.gh-banner-right {
  flex-shrink: 0;
}

.gh-banner-headline {
  font-size: 120%;
  font-weight: 700;
}

.gh-banner-button {
  padding: 0.35em 0.65em;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 3px;
  transition: background-color 0.3s;
}

.gh-banner:hover .gh-banner-button {
  background-color: var(--ghost-accent-color);
}

@media (max-width: 500px) {
  .gh-banner {
    font-size: 1.4rem;
  }

  .gh-banner-inner {
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .gh-banner {
    position: relative;
    color: #fff;
  }

  .gh-banner::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0 0 0 / 50%);
  }

  .gh-banner-inner {
    position: relative;
    z-index: 1;
  }
}

/* Override Headline theme defaults */
.gh-banner:hover {
  opacity: 1 !important;
}

.gh-head-menu::before {
  top: 170px;
}

.gh-head-menu::after {
  top: 226px;
}
</style>

But I can’t manage to put the background image. what line should I increase or remove so that instead of background color I have the background image?

Thanks

4

This is covered by the edit to default.hbs, and the CSS for gh-banner.

style="background-image: url({{asset "images/banner-background.jpg"}}
5

What I can’t find is how to tell the “Code Injection” code to use the image described in the default.hbs code instead of the background color.

In the same tutorial it indicates the following:

You can omit the background image altogether by removing style="background-image: url({{asset "images/banner-background.jpg"}})" from the code snippet above. The banner will fall back to the background color defined in the next section.

And then it explains about the code to embed in the Site Header, but I can’t find the way to include the background image instead of the background color.

6

This explains how to remove the image, not add it. In other words, the code samples are for using an image, and require no alteration.

If you can’t see the image, check your path. Alternatively, share the parts you added to default.hbs, where you placed the image, and the CSS code injection. Domain name, and the theme you’re using would be helpful, too.

7

I don’t see the image, I only see the background color.

CSS code injection:

<style>
.gh-banner {
  display: block;
  height: 90px;
  padding: 0 var(--gap);
  line-height: 1.3;
  background-color: #f97066; /* Banner background color */
  background-repeat: no-repeat;
  background-position: center;
}

.gh-banner-inner {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
}

.gh-banner-right {
  flex-shrink: 0;
}

.gh-banner-headline {
  font-size: 120%;
  font-weight: 700;
}

.gh-banner-button {
  padding: 0.35em 0.65em;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 3px;
  transition: background-color 0.3s;
}

.gh-banner:hover .gh-banner-button {
  background-color: var(--ghost-accent-color);
}

@media (max-width: 500px) {
  .gh-banner {
    font-size: 1.4rem;
    text-align: center;
  }

  .gh-banner-inner {
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .gh-banner {
    position: relative;
    color: #000;
  }

  .gh-banner::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0 0 0 / 0%);
  }

  .gh-banner-inner {
    position: relative;
    z-index: 1;
  }
}


</style>

default.hbs

{{#is "home"}}
<a class="gh-banner" href="https://URL/offer" style="background-image: url({{asset "images/banner-1.png"}})">
    <div class="gh-banner-inner">
        <div class="gh-banner-left">
            <p class="gh-banner-headline">Test Banner</p>
            <p class="gh-banner-cta">Welcome</p>
        </div>
        <div class="gh-banner-right">
            <p class="gh-banner-button">View post/p>
        </div>
    </div>
</a>
{{/is}}

banner-1.png file is located ghost/content/images

The theme is Edge (last version)

It’s currently on a server that is not public, but I will try to post it to show it off

8

I suggest you open the page in Firefox or Chrome, and use developer tools to check what is happening to the resource.

Also, be sure to give the image the correct credentials, i.e., owner and permissions.

9

One other thought here is that your image should be in an images folder inside your theme’s assets folder. My guess is that the path to the image isn’t correct if you’re putting the image directly on your server.

1 Like
10

Ok @mjw, i run:

$: ls -l /var/www/ghost/content/images/banner-1.png
-rw-r--r-- 1 ghost ghost 5072 Aug 2 04:18 /var/www/ghost/content/images/banner-1.png

Firefox Inspector:

Error [HTTP/2 404 Not Found 227ms]
/assets/images/banner-1.png/?v=7ce53b100f
404
Not Found
VersionHTTP/2

And this confirms what @RyanF said, it was in the wrong folder.

I corrected the file location and did a:
$: ghost restart

All is well! The tutorial is correct and I just checked it and it does say:

The last edit to make is to add the background image. Add the image to the theme’s assets/images folder.

Thanks @mjw and @RyanF for the wonderful help to this newbie, my mistake not to have checked that.

2 Likes