[specimen65]

Hi,

Was wondering how best to add a full-size image to the background of the text “A simple, modern looking theme” in the Persona theme (dimensions, media queries etc)?

If an image is specified as the background,  does it scale responsively to all viewports/devices?

[itips3727]

@specimen65

Here’s one quick way that you can use as is, fine-tune, or edit further:

1.  To prevent any theme updates from deleting your changes, do a theme override as outlined at: https://getpublii.com/dev/theme-overrides/
2. So you’ll then have a new sub-folder with the name: persona-override
3. Copy the index.hbs file in the persona theme folder into the persona-override folder.
4. Using a plain text editor like ‘Visual Studio Code’ ( https://code.visualstudio.com ), edit the index.hbs file in the persona-override folder. How:

   Change line 8 from:

   to:

5. Once you’ve saved your changes do Step 6.
6. Go to Tools & Plugins > File manager > at the top, choose ‘media/files’ folder. Choose the Upload files button to upload the image your want to use for your home page. In the example below, I used an image size of 2560 x 1880 pixels — though when you Preview or Publish your site, Publii will automatically optimise it.
7. In Publii, go to [website name] > Theme > Theme Settings > Custom settings > Layout > Front page > in the ‘Hero text’ WYSIWYG editor toolbar, choose the Source code button.

   In Publii, go to [website name] > Theme > Theme Settings > Custom settings > Layout > Front page > in the ‘Hero text’ WYSIWYG editor toolbar, choose the Source code button.

   In the Source code window, as I’m using an Apple Mac, I used the following code copy. Edit to match your file names:

   
   <h1>A simple, modern looking theme for your blog or portfolio website.</h1>
   <p> </p>

   The class=”post__featured-image–full” bit ensures your image is full width, using Publii’s built-in CSS for different sizes of images (https://getpublii.com/dev/default-publii-classes-for-using-with-css/)

[specimen65]

Thanks so much for this @itips3727.

So many possibilities with this. Can even add a CTA button in the editor with code as well.

[itips3727]

You’re welcome @specimen65 : glad it helped.

Good idea about adding a CTA button this way too!

[specimen65]

Oh, @itips3727 do you think there is a way to get the H1 text to overlay the hero image (like it does on the Publii “Simple” template for eg?)

Or maybe even how to get the entire image to overlay the horizontal header section with the branding on left/nav on right and then the hero text below – those whole sections are overlaid by one background image which really looks nice. (another example of this is the “Melissa” template which does this too. That one actually has a CTA button in there too)

[itips3727]

@specimen65

Sure, you can overlay text over images. Though of course that means more customisation, etc., especially to consider both mobile and desktop view options. If you’re into coding, you can explore how the Simple and Mellisa themes use that technique. Or, the faster option is to choose a Publii theme or other Publii-compatible theme that includes most of what you want, then just use the theme settings and CSS colours to make your site unique.

[Author]

Posts