In Plan view, double-click the A-Master page thumbnail to open it in Design view.
Using fill and browser fill in Adobe Muse
Read this article to learn how to apply browser and background fill options in Adobe Muse.
Browser fills and background images in Adobe Muse
When you plan your web design for your site, background fills form an important part of the design. Background Fill in Adobe Muse allows you to add a background color or an image for your website. You can use background images to convey the brand value of a product or a service. Similarly, you can use background fills to add design value or match the color theme of your site.
When you add a background fill and view your site in a browser, the selected image or color is displayed as the background in the browser window. To make the design uniform and consistent, apply the background fill to the master page.
Read the following article to learn how to apply background fill in Adobe Muse. You can do one of the following:
Fill the browser with a background color
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.
Fill the background with an image
Using images as background fills is common in web designs. Adobe Muse allows you to fill the background with either repeating images, or a single image. Further, it is possible to select the position and scrolling properties of a background image.
Read on to know how to use images as background fills in Adobe Muse.
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.
If you set the Fill Type to Gradient, you cannot set an image as a background fill.
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.
To remove a background fill, click the trash can icon next to the folder icon.
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.
Apply 100 percent width for page elements
Items that are set as 100% width fill the browser horizontally, no matter how wide the visitor's browser window is resized. If you set a page element to align with the top and bottom edge of the browser window, an object filled with a solid color or tiled asset also expands to fit the available space.
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.
Modify the opacity and transparency of background fills
Apart from adding an image as a background for your website, Adobe Muse also allows you to modify the opacity of the fill. You can adjust the fill color of a page to make it partially transparent. By default, Adobe Muse uses a white fill for the master page. You can control the color and transparency of the page.
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.
Background fill and scroll effects
Adobe Muse allows you to add scroll motion to images that are applied as background fills. To know how to set the scroll properties for background images, see Apply scroll motion to a background image.