Using fill and browser fill in Adobe Muse

In Plan view, double-click the A-Master page thumbnail to open it in Design view.

The A-Master page opens in its own tab along the top of the workspace.

Notice the Selection Indicator that is located in the upper-left corner of the Control panel. When no page element is selected, the Selection Indicator displays the word Page. If you select an object on the page, for example an image, the word Image Frame is displayed in the Selection Indicator.

Use the Selection Indicator to verify the selected element that you want to control. If you select any other page element, you can reselect the page by clicking the gray area outside the page.

While the page is selected, you can use the menus in the Control bar to update the fill color and stroke settings.

In the Control panel, click Browser Fill. Select the desired color from the Color field. You can do one of the following to choose the background fill color:

• Choose a color using the color picker.
• Type the RGB value.
• Type the hexadecimal code in the Hex# field.
• Click and select a color from the swatches that are already saved.

To apply a solid or a gradient fill color, in the Browser Fill panel, select Solid or Gradient. Use the radio button to choose between solid and gradient fill colors.

To apply a gradient, set the Fill Type to Gradient. Set the color swatches to set the first and last color stops.

Set the orientation of the gradient by setting the Direction to Horizontal or Vertical.

In the Control Panel, click Fill. Ensure that the fill color of the page is set to None. The Fill menu displays a white swatch with the red diagonal line.

Open the Master page for your .muse file. 

It is possible to add a background image for a particular page. However, if you want the background image to appear in every page in your design, go to the Master page.

From the Control panel, click Browser Fill. Verify that the Fill Type is set to Solid.

To select an image as the background fill, click the Add Image link. Browse and select the desired image file from your local computer. Click Open to set the background image.

Set the Fitting for the background image. You can set one of the following options:

• Scale to Fill: The background image scales in size. The image scales to size and position, according to the settings that you specify.
• Scale to Fit: The image scales to fit.
• Original Size: The image is applied as a background fill in the original size.
• Tile: The image is repeated throughout the background. The tiling option enables you to create a smaller image that repeats as it spans the browser window, regardless of the size of the visitor's monitor.
• Tile Horizontally: The image tiles are repeated in the horizontal direction.
• Tile Vertically: The image tiles are repeated in the vertical direction.

Tiled background images are commonly used in web designs. When you publish the site, the original small image that you set as a tiled background fill only loads once in the browser. Tiled background images enable you to cover large areas of the page without impacting the download speed or the performance of your site.

To set the position of the background image, select the desired position from the nine grid positions. For example, if you click the center square, the image is displayed in the center of the browser window.

Click anywhere outside the Browser Fill panel to close it.

To view the background image, preview the site in Adobe Muse, or in a browser.

Open the page where you want to set the 100% width for a page element. Select the required page element. For example, select a rectangle that spans the width of the page and is about 250 pixels high, near the bottom of the page.

While the rectangle is selected, set the Stroke Width to 0. You can tell when the rectangle is selected, because the Selection Indicator in the upper-left corner displays the word Rectangle.

In the Control panel, click Fill. Ensure that the Fill menu is set to None. You can see a white swatch with a red diagonal line.

Click the Add Image link in the Fill panel. Browse to the desired image, select the image, and click Open.

From the Fitting drop-down list, select Tile Horizontally. This option causes the image to tile from left to right, across the x-axis.

Drag the transformation handles of the rectangle to position it to the bottom of the visible area. Adjust the width to intersect with the left, bottom, and right sides of the page.

A red border appears temporarily that indicates that the rectangle is set to 100% width mode.

In the Control panel, click Browser Fill to expand the menu. To select an image that you want to add as background fill, click the Add Image link.

In the Control panel, click Fill to expand the Fill menu.

Set the Opacity to 80%. This setting means that it is mostly still opaque, with a 20% transparency. You can continue to edit the page to add a border or apply additional graphic effects.