Loading...
 

Custom Background Image (version 0.1.1)

Custom Background Image creates and assigns a custom module featuring a "Custom Background Image".

Screenshots



Known Issues & Limitations

  • Only the first profilerequest (user input) field (before applying the profile) shows up for some reason :-(
  • The background-blend-mode works in Firefox (FF bug?) correctly only when the parent element has a background-color set (that is why I added the html {background-color: #fff} rule now), thanks John Morris for testing!

Installation & Update

 Please note

If you do an update please do not forget to unassign the previous version of the profile module in Modules, otherwise you will end up with multiple versions of the module applied.

By hitting the Apply Now button on Control PanelsProfiles control panel (or Forget and Re-apply if you want to do an update) the following YAML code will be applied:

YAML
objects:
 -
  type: module
  data:
   name: Custom Background Image 0.1.1
   position: bottom
   order: 1
   params:
    nobox: y
   custom: |
    <style type="text/css">{literal}
    html {background-color: #fff}
    body {
     background-image: url("$profilerequest:Link to the background image:$//farm5.staticflickr.com/4446/26222277169_bf7b7d3090_k.jpg$");
     background-size: $profilerequest:"Background size:"$cover$;
     background-attachment: $profilerequest:"Background attachment:"$fixed$;
     background-position: $profilerequest:"Position:"$center center$;
     background-blend-mode: $profilerequest:"Blend mode (use darken for dark bg color):"$lighten$;
     background-color: rgba($profilerequest:"RGB value of the body bg color:"$255,255,255$,.5);
     min-height: 100vh;
    }
    .middle, .row-middle {
     background-color: rgba($profilerequest:"RGB value of the .middle bg color:"$255,255,255$,.75) !important;
     padding-top: 20px;
    }
    .topbar {margin-bottom: 0}
    {/literal}</style>


Usage

This profile creates a custom module with a "Custom Background Image" CSS code in it applied to the body HTML element.
The module will be assigned to the bottom zone.

Uninstall

Just un-assign and delete the module on the Admin → Modules page.