Ask a Question ?
Design & Publish Websites Faster

Backgrounds that Fit Your Page Width

In this post you will learn how to set up a background for your page, and make it so it always spans the whole width of your (or your visitor’s) window.

How to Make Your Background “Fit to Area”

Once on your site, go to the shelf and click on “Styles”.

The shelf admin bar

Click on the “Styles” button

The bulk style editor will open. Select “Page Containers” on the left.

The bulk style editor on the "Page Containers" tab

Click on the “Page Containers” tab to see its options

Here you’ll see the options of the background for the full page. Click on “Edit” on the right side of “Background Image”.

"Edit" the background image button

Click on this button to reveal more options for the background image

After clicking it, a new panel will open with the following options:

  • Horizontal position. Adjust the position of your image in a horizontal axis. As you move the slider left or right, so will your background image.
  • Vertical position. Same as above, but based on the vertical axis (up and down).
  • Repeat/fitting options. Here you can select a repeat mode for your image. Or, the one we’re looking for, is “Fit to Area“.
  • Custom image. Clicking this button will prompt for an image from your hard drive.

The image below shows where each of them are located in this panel.

Options for your background image

This image shows options for your background image

Here you can select one of the available predefined images or add your own. To add your own, click on the button labeled “+ Custom Image”.  Once you select your image, you need to change the “fitting” option to “Fit to Area”. Refer to the image above.

Once you’ve done this, you may need to force the transparency on one, several or all blocks of your layout (depending on the design effect you want to achieve).

Checkboxes for forcing transparency

Each of these blocks is “opaque” and has its own background, unless you force transparency

And that’s it! Please experiment with it.

One thing to note is that if you change the size of your browser window, the background image will adapt too.


Why can’t I see the background?

You may not see your page background because one or more of your blocks have a background. To fix this, refer to the previous image (above) and  select “force transparency” on each of the blocks that you want to make transparent.

Can I apply it to other style dots backgrounds?

Currently, “Fit to Area” is only available to full page backgrounds, so you won’t find it in any other style dot background (like blocks).

Can I use my own images?

Yes! Upload images from your computer by clicking on the “Custom Image” button, on the “Background Image” options panel.

Did we miss something? Please let us know on the comments.