Roots Discourse

Best way to output background image on each page

Hi, I’m not sure of the best way to display a background image on each page, that will cover the whole page area. I can output the image as a background image from ‘Featured image’ and also a custom field in ACF, but essentially this needs to be on the body tag and I’m sure sure on the best way to go about this. Any help much appreciated, thanks!

Hello @eursula.

There are many ways how to approach this and it is not very much specific to Sage I would say.
For example:

  1. use featured image for Frontpage if your front page is set in Settings -> Reading -> Front Page as a static page. Then across all pages just check for featured image and set it in body tag. Of course put your code in App controller or hepers.php depending on what you wanna do exactly.

  2. Same would work with ACF, with more flexibility here if you perhaps need different / multiple images etc., and you can pass all ACF data to views via
    protected $acf; inside the class. See ACF variables in blade template too.

  3. Depending on if the background image is different for each page: if it’s the same, you could set it in your custom “options” page which you can create easily with ACF Pro as well: https://www.advancedcustomfields.com/add-ons/options-page/.

Do you need more specific info? What is your exact problem? :slight_smile:

There is an awesome guide to give responsive behavior to background images.

Hi @trainoasis, thanks for taking the time to reply!

I found a solution, where-by I added/created it in a new app.blade.php. This was the quickest solution I found, and it’s working and displaying the background image for each page that’s set in the Featured Image field in each Page.

And @aitor - thanks for the reference guide. Have taken a look and would like to incorporate this as well. Cheers!

This topic was automatically closed after 42 days. New replies are no longer allowed.