Microsoft Office Live
Back   Forward   Home   Print 
Microsoft Office Live Home > Web Site > Designing the look and feel of your Web site
Add a background color or image to a Web site, page, or zone

To customize your site's appearance, you can do the following:

  Notes  

Play demo Watch a demo about customizing your Web site's look (2:59)

 Important   If you partially redirected a domain name to your Office Live Small Business account: Before you can make changes to your Web site after partial redirection, you must change the primary domain to your free Office Live Small Business domain that ends in .officelive.com. For more information, see Make changes to your Web site after partial redirection.

What do you want to do?

Add a solid color or color gradient to the background of your Web site

You can add a color gradient or solid color to the background of your entire site.

  1. On the Microsoft Office Live Small Business Home page, at the top, click Web Site.
  2. In Page Manager, click Design Site, and then select Design site.
  3. On the Site Designer tab, in the Advanced group, click Options.
  4. In theSite Options dialog box, under Display options, select Gradient from the drop-down list.

     Note   To have a solid color or no color appear on your page background, you can also select Flat color or Blank.

  5. Click OK.

 Note   To change the color of your background, see Customize your Web site color scheme.

Top of Page Top of Page

Add a background picture to a Web page

You can add an image to the background of individual Web pages.

 Note    You cannot add an image to the overall background of your entire Web site.

  1. On the Office Live Small Business Home page, at the top, click Web Site.
  2. In Page Manager, locate the page you want to add a background image to, and then click Edit.
  3. On the Page Editor tab, In the Advanced group, click Page background.
  4. Select the Use background image check box.
  5. Next to Image file, click Select.
  6. In the Select an image box, under Choose images from, select an image from your computer's hard drive or the Image Gallery:

    ShowTo select an image from your computer

    1. Select My computer to select an image from your computer's hard drive.
    2. Click Browse for an image, and then browse to and click the image that you want to use.
    3. Click Open.
    4. Select the Optimize my image check box if you want to optimize the image for the Web.

       Note   If you select this option, the image is converted to JPG if it is not already in this format, and the JPG conversion quality level is set to 100 percent. The image is resized to a maximum of 640 pixels, maintaining its aspect ratio. These changes to the image will help it load faster on Web browsers.

    5. Click Insert image.

    ShowTo select an image you have uploaded to the Image Gallery

    1. Select My uploaded images to select an image that you uploaded to the Image Gallery. (For more information about the Image Gallery, see Add or remove an image.)
    2. Select the image, and then click Insert Image.
  7. In the Page background dialog box, in the Position drop-down list, select where on the background you want to position the image: Top left, Center left, Bottom left, Top center, Center, Bottom center, Top right, Center right, or Bottom right.
  8. In the Tiling drop-down list, select whether and how to tile (repeat) the image.
  9. Click OK.

Top of Page Top of Page

Add a solid color or color gradient to a Web page zone

A Web page zone is a specific area on a Web page that contains content. In the Web Design tool, when you are editing a page of your Web site, zones are numbered and appear as boxes with a dotted-line border.

  1. On the Office Live Small Business Home page, at the top, click Web Site.
  2. In Page Manager, locate the page you want to edit, and then click Edit.
  3. On your Web page, place your cursor in the zone that you want to edit.
  4. On the Page Editor tab, In the Zone group, click Zone format.
  5. In the Fill list, select Solid fill if you want a solid color background, or Gradient fill if you want a gradient color (a color fading from darker, or more saturated, at the top to lighter at the bottom) background.
  6. In the Transparency box, type a percentage from 1 to 100 to determine the transparency (degree of saturation) of the color. For example, 0 percent displays the color fully saturated, and 100 percent displays no color. A higher transparency percentage fades the color more; a lower transparency percentage displays the color more intensely. Use this setting to set the exact intensity of the color.
  7. Click the color button, and then click the color that you want.
  8. Click OK.

Top of Page Top of Page

Add a picture to the background of a Web page zone

A Web page zone is a specific area on a Web page that contains content. In the Web Design tool, when you are editing a page of your Web site, zones are numbered and appear as boxes with a dotted-line border.

 Note   You cannot add a picture to the overall background of your entire Web site.

  1. On the Office Live Small Business Home page, at the top, click Web Site.
  2. In Page Manager, locate the page you want to edit, and then click Edit.
  3. On your Web page, place your cursor in the Zone you want to edit.
  4. On the Page Editor tab, In the Zone group, click Zone format.
  5. In the Fill list, select Image fill.
  6. In the Transparency box, type a percentage from 1 to 100 to determine the transparency (degree of saturation) of the image. For example, 0% displays the picture fully saturated (as it ordinarily appears). Any percentage higher than 0 will progressively fade the image until it is not visible at all at 100%. This enables you to set the ideal contrast of the background to the content in the zone.
  7. Next to Image, click Select.
  8. Select an image from your computer or the Image Gallery:

    ShowTo select an image from your computer

    1. Select My computer to select an image from your computer's hard drive.
    2. Click Browse for an image, and then browse to and click the image that you want to use.
    3. Click Open.
    4. Select the Optimize my image check box if you want to optimize the image for the Web.

       Note   If you select this option, the image is converted to JPG if it is not already in this format, and the JPG conversion quality level is set to 100 percent. The image is resized to a maximum of 640 pixels, maintaining its aspect ratio. These changes to the image will help it load faster on Web browsers.

    5. Click Insert image.

    ShowTo select an image you have uploaded to the Image Gallery

    1. Select My uploaded images to select an image that you uploaded to the Image Gallery. (For more information about the Image Gallery, see Add or remove an image.)
    2. Select the image, and then click Insert Image.

      3.  Note   The My uploaded images page shows a maximum of 24 images per page. To view additional images, click the page numbers in the lower-right corner of the page.

  9. In the Position list, select a position for your background image within the zone.
  10. In the Tiling list, select whether and how you want the image to tile (repeat) within the zone.
  11. Click OK.

Top of Page Top of Page

Remove a background color or image from a Web page zone

  1. On the Office Live Small Business Home page, at the top, click Web Site.
  2. In Page Manager, locate the page you want to edit, and then click Edit.
  3. On your Web page, place your cursor in the zone that you want to remove formatting from.
  4. On the Page Editor tab, In the Zone group, click Zone format.
  5. In the Fill list, select No fill.
  6. Click OK.

Top of Page Top of Page

Add a border to a Web page zone

A Web page zone is a specific area on a Web page that contains content. In the Web Design tool, when you are editing a page of your Web site, zones are numbered and appear as boxes with a dotted-line border.

  1. On the Office Live Small Business Home page, at the top, click Web Site.
  2. In Page Manager, locate the page you want to edit, and then click Edit.
  3. On your Web page, place your cursor in the zone you want to edit.
  4. On the Page Editor tab, In the Zone group, click Zone format.
  5. In the Zone format dialog box, on the left side, click Border.
  6. To remove a border, select No border; to add a border around the zone, select Solid line.
  7. Click OK.

Top of Page Top of Page