How to make Casper featured images full bleed width

Themes
1

I’ve been working on tweaking the Casper theme a bit for my new blog. I’m coming from Medium, where you were able to add images above the title. I’m in the habit of using a full-screen width image as a post-type cover. I figured I could do the same in Casper by editing the theme so the Featured Image is above the title, and full-bleed width. I’ve gotten the image in the right place, but there is still a lot of white space above and to the sides of it. What can I do to get rid of these, e.g as it looks more like in the Liebling theme?

image
image1853×962 173 KB

1 Like
2

Hey @edwardsedition,

The header section of posts uses CSS grid, and you can make it edge-to-edge very easily with a line of CSS.

.gh-canvas .article-image {
    grid-column: full-start/full-end;
}
2 Likes
3

That worked for the width. Now I just need to find what’s causing the space at the top, between the header bar and the image.

image
image1840×964 175 KB

I might also try to center the title, tags, etc, but that’s a different issue.

4

Hi Everybody,
I am brand new to Ghost and am having the same request i.e. making an image full-screen width. I am using the Ease theme. In which file should I edit the CSS?
Thanks