How can users change a header background image in a Premium template?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I crfeated a new site to test the ability to customize Yola's 'premium' templates, and selected the 'Urban Smooth' template. A grayscale background image is included at the top, that appears to be part of an x-ray. Here is a screen cap:

(1) I wallked through the tutorials for site customization, and tried the built-in "Style / Edit Background" option -- which did not work.

(2) Then I inspected the template site's properties, and found the information for this template's background image:

DIV = Sys_Background
File =

(3) I modified the site's CSS, and added the following section, with the path for my new image:

div#sys_background {
background-image: url( data - abstract blackground - dark - 1300 x 400.png);
background-position:top center;

I saved the CSS change and refreshed the preview, with no luck.

So.. how can the user change a template's background image?


Mark Hays
Photo of markallenhays


  • 24 Posts
  • 4 Reply Likes

Posted 7 years ago

  • 1
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hi Mark, i just tried loading the same template on my own test website. I didn't have a problem when I uploaded a .png image and then selected it in the SiteBuilder>Style>Edit Background.

The first file I tried was a .gif and that didn't work. On the Edit Background screen when I selected a color and not a new image, that also didn't work. But uploading a .png or .jpg image & then clicking on the Repeat "Tile" button worked...

I was just looking at the path name of your file in the css code. Is the page you are trying to load the image to in the default directory or is it in a restricted sub folder? If you have uploaded the new background image to the resources folder (Site>File Manager > Upload files), changing the file path to "../resources/filename.jpg" may work. The .. in front of the file path makes it look for the file outside of the sub folder. If that page is not in a sub folder, changing the path to "resources/filename.jpg" may work.
Photo of Gop


  • 7473 Posts
  • 2115 Reply Likes
Hello Mark,

I've opened urban Polish ona test site I have and endeavoured to replace the banner background with a jpg image stored in the file manager. Then chnaged the image address and name to correspond. This then showed the new banner background.

div#sys_background {
background-attachment: scroll;
background-color: #999999;
background-image: url("resources/Photoxpress_10746710.jpg");
background-position: center top;
background-repeat: repeat-x;
height: 400px;
position: relative;
width: 100%;

Then I tried background replacement with the facility in the Style and this also replaced the same banner background but not the lower background.
Photo of markallenhays


  • 24 Posts
  • 4 Reply Likes
Dear Crystal and GOP:

Thanks for the quick replies and info. It looks like a relative URL is the key, e.g.:

background-image: url("resources/Photoxpress_10746710.jpg");

This tip should be added to Yola's online help / support page for site customization.


Mark Hays