Hello! I am brand new to ghost / CSS and am in the process of building my site. I have ghost running locally, I have the pro plan so I can modify and upload custom themes if necessary.
I’m trying to modify the layout of my site (currently using the London theme) and getting nowhere. What I want is a tiled background image visible behind the entire site, including the gh-header area. I have the Ghost Pro and can edit and upload custom themes. I figured out how to use code injection to set a background image stored in the theme’s assets folder:
body { background-image: url("/assets/images/background.png"); }
However, when I do this, the header area, where the theme is putting the publication-logo image, the navigation menus, and the subscription image has a solid white background. I’ve tried redefining gh-canvas but that doesn’t work. Is there a way to make the background image visible globally or make the top banner have a transparent background? What attribute should I try to change, gh-head, site-wrapper, gh-head-brand, gh-head-inner, gh-head-brand-wrapper, gh-head-logo, or what? If there is documentation explaining what each of these things mean in the context of London, I cannot find it–if such a thing exists, please point me to it!
Secondly, I would like the post pages to have a different background on the center column, so that the text appears over a paper texture that matches the texture of the global background. Is this possible? If so, how might I do it?
Would it be easier to change Casper or Source or something else more documented to feature a main page of images that display the post title when you mouse over them, like London does, than to try to modify London? I am working on a locally hosted instance at the moment.
Yeah, the path works, and I did wrap it in style tags. It is loading the image, but it is covered by the banner at the top. I can implement this in production but I’ll have to zip up the theme and so on, so give me a secong. Here’s what it looks like; the blueprint background should go under everything (except the center column of a post, but that’s another issue.):
OK, the production site, with some old content loaded up to mess around with and figure out how it will look, is at https://thecriterioncontraption.com.
What I’ve done here is downloaded the London theme, added a few images to the /assets/images/ folder (made no changes to the other files) loaded it to production, and used code injection to add the following:
<STYLE>
body {
background-image: url("/assets/images/patentbackgroundfullres.png");
}
</STYLE>
I haven’t made any other changes to the files of the original London theme (but I can and will, because I’m going to make a few font changes). I know that it looks terrible right now, but I’m trying to get the layout right before reducing the image size and so on. Any idea how to get that background behind the entire site?
I agree, but I can’t find documentation on what the various gh-variable things actually apply to in the theme and do not know what I need to change or override to remove the white background from the navbar.