Move background image to css

[rain2o]

https://github.com/Myzwer/foothillschurch/blob/effc5bbf81497ae99f0561ab7849412fe9272bfd/components/headers/simple-header.php#L11-L13

I'm seeing several places where this code is repeated, using PHP to inline the background image and some other styles with it. Why not move this to CSS instead? Less repetition and no PHP needed.

To do so, you'll need to add images to your compiled output. This setup worked for me, though it's been a while since I've worked with webpack so there might be some improvements that can be made from here.

// webpack.config.js
// Add this to rules

// *** IMAGES ***
{
  test: /\.(png|jpe?g|gif)$/,
  use: [
    {
      loader: "file-loader",
      options: {
        outputPath: "../img",
        publicPath: "../img"
      },
    },
  ],
},

// _background.scss for example

.topography-bg {
  background: url("../../img/topography.png")  center center;
  height: 20vh;
}

That will compile the image and maintain the reference, so if you use class="topography-bg" it will have the same bg image.

[Myzwer]

Commenting so I can find this later, im gonna mark it as closed - unplanned, but I'll come back to it after launch.