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

  1. 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.

  2. 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.
    Set a color as the background fill
    Set a color as the background fill
  3. 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.

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

    Set the Gradient Fill option
    Set the Gradient Fill option
  5. Set the orientation of the gradient by setting the Direction to Horizontal or Vertical.

  6. 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.

    Set Fill to None in Adobe Muse
    Set Fill to None

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.

  1. 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.

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

    Set the background image that displays in the browser window.
    Set the background image that displays in the browser window.

    Note:

    If you set the Fill Type to Gradient, you cannot set an image as a background fill.

  3. 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.

  4. 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.

  5. 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.

    Note:

    To remove a background fill, click the trash can icon next to the folder icon.

  6. Click anywhere outside the Browser Fill panel to close it.

  7. 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.

  1. 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.

  2. 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.

    Use the Stroke field to set the selected rectangle's stroke to 0.
    Use the Stroke field to set the selected rectangle's stroke to 0.
  3. 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.

    Use the Fill menu to select the rectangle fill
    Use the Fill menu to select the rectangle fill
  4. Click the Add Image link in the Fill panel. Browse to the desired image, select the image, and click Open.

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

    Set the rectangle with the image to 100% width
    Set the rectangle with the image to 100% width
  6. 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.

  1. 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.

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

  3. 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.

    Set the Opacity of the background fill
    Set the Opacity of the background fill

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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy