How do you add images to your headers instead of just color styles?

  • Create a new folder inside the images folder on your server and upload your background image into it. Then under your style's Data settings put the name of your new folder in this field like so: images/NewFolder.



    Now you can add the following to your style's Advanced Settings. Change the image name to whatever the name of your image is and change 110px to give your image more or less space for the height.

    Code
    1. .pageHeaderContainer {
    2. background : url(#{$style_image_path}background.jpg) no-repeat center;
    3. }
    4. .pageHeaderFacade > .layoutBoundary {
    5. padding-bottom: 110px;
    6. padding-top: 110px;
    7. }
  • Create a new folder inside the images folder on your server and upload your background image into it. Then under your style's Data settings put the name of your new folder in this field like so: images/NewFolder.



    Now you can add the following to your style's Advanced Settings. Change the image name to whatever the name of your image is and change 110px to give your image more or less space for the height.

    Code
    1. .pageHeaderContainer {
    2. background : url(#{$style_image_path}background.jpg) no-repeat center;
    3. }
    4. .pageHeaderFacade > .layoutBoundary {
    5. padding-bottom: 110px;
    6. padding-top: 110px;
    7. }


    Wow, thank you so much for this. I really appreciate it.