Home > Articles > Web Development

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Filling the Browser with a Background Image

In web design it’s very common to fill the browser window with a tiled background graphic. By doing so, the background graphics repeat endelssly whenever you enlarge the browser window. You can also incorporate tiled graphics into your overall site design by placing page contents, such as nav bars, text, or photos, over them. One of the best ways to utilize tiled graphics is to fill the browser with them on your master pages. You can also fill a rectangle with tiled graphics and place them as page contents or as footers (see Chapter 5, “Working with Graphics”).

Use the Browser Fill Image option

  • yellow_1.jpg In Plan Mode, double-click a new page or master page thumbnail from the sitemap.

    Muse opens the page in Design Mode.

  • yellow_2.jpg Click the Browser Fill button in the Control panel.

    Muse displays a drop-down Fill panel.

  • yellow_3.jpg Click the Choose Background Image button (the folder icon).

    03fig37.jpg

    Muse displays the Import dialog box.

  • yellow_4.jpg Using the Import dialog box, navigate to the background image on your system disk. Click the image file to select it and then click Select.

    Muse fills the browser with the chosen background image.

  • yellow_5.jpg Choose a fitting option from the Fitting drop-down list. Options include: Original Size, Tile, Tile Horizontally, and Tile Vertically.

  • yellow_6.jpg Click one of the small squares next to the Position option in the Fill drop-down panel. By doing so, you can determine where the image starts repeating from in the browser window.
  • yellow_7.jpg Enable the Scrolling option to allow tiled background graphics (that do not fill the entire browser window) to move with the rest of the page contents when scrolling.

    Disable the Scrolling option if you’d like the tiled background graphics to remain fixed in position as you scroll the page in a browser.

  • + Share This
  • 🔖 Save To Your Account