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