{"id":183801,"date":"2013-02-05T23:08:49","date_gmt":"2013-02-05T23:08:49","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=183801"},"modified":"2018-12-18T10:28:04","modified_gmt":"2018-12-18T18:28:04","slug":"background-image-tips-for-organization-home-sites","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/administration\/background-image-tips-for-organization-home-sites","title":{"rendered":"Background image tips for organization home sites"},"author":7641,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[37501],"tags":[57521,33521],"industry":[],"product":[36551],"class_list":["post-183801","blog","type-blog","status-publish","format-standard","hentry","category-administration","tag-home-page","tag-organization","product-arcgis-online"],"acf":{"short_description":"One of the new capabilities introduced with the December 2012 ArcGIS Online update was the ability to set a custom background","flexible_content":[{"acf_fc_layout":"content","content":"

One of the new capabilities introduced with the\u00a0December 2012 ArcGIS Online<\/a>\u00a0update was the ability to set a custom background for your organization\u2019s home site. This provides flexibility in tailoring your organization\u2019s home page look and feel. Here\u2019s a few tips and ideas for getting effective and professional looking results.<\/p>\n

Choosing a new background<\/strong><\/p>\n

As an adminstrator, click My Organization at the top of the page.<\/p>\n

\"\"<\/p>\n

Then click Edit settings. Under the Home Page settings you\u2019ll find the Background Image, and you\u2019ll see the default \u201cblue wave\u201d image is selected.<\/p>\n

\"\"<\/p>\n

You can use the default, select no background, or choose to upload a custom image as your Home page background.<\/p>\n

Using custom images<\/strong><\/p>\n

When using custom images the first thing to keep in mind is that less is often more when it comes to creating a pleasing and professional home page. Going overboard can easily yield spectacularly disagreeable results. If you do have a graphics professional in your organization, this is a good time to use their skills and judgement.<\/p>\n

Click the upload custom image option if you want to use a custom image of your choice instead of the default. If you\u2019re interested keeping the design of the blue wave, but want to change the color, you can grab the existing image and tweak it. Using Chrome (options will be different in other browsers) right-click the image, and chose Copy image.<\/p>\n

\"\"<\/p>\n

The image is 1920 pixels by 720 pixels \u2013 a good size to consider when using custom background images since this will be large enough in the x direction that the seams at the image boundaries (discussed later in this post) won\u2019t appear.<\/p>\n

After copying the image, paste it into an image editing app (like Paint, Photoshop, or similar) and tweak the color as desired. Save it out for the web, with reduced size and resolution for best performance. Below we\u2019ve changed the default blue wave image, using several color variations.<\/p>\n

\"\"<\/p>\n

Size matters<\/strong><\/p>\n

If you stretch out your organization home page you\u2019ll see that the default background image is centered along the top and center of the page, and extends out beyond what can normally be seen on standard resolution displays. Beyond that extent the image repeats. The screen capture below, showing the edges of the background image indicated with blue arrows, was made by stretching our home page across two monitors.<\/p>\n

\"\"<\/p>\n

When adding a custom background try to hide the edges. To do this, just make the image larger than the largest display you\u2019ll typically encounter. We recommend a width of 1920 pixels, the size of the default blue wave image is 1920 x 720.<\/p>\n

Another good technique is to fade the edges of your image on all sides to white or transparent, eliminating the visible seams as the image is duplicated and making the left-to-right and top-to-bottom transitions smooth. Avoiding sharp edge transitions will keep the overall look of your home page pleasing and professional.<\/p>\n

Keep in mind that there is text at the top of the home page, and keeping a white border along the top helps keep it readable. Below is an example where the text is obscured by a background image that doesn\u2019t include a little white space along the top. Can you read the text pointed to by the arrow?<\/p>\n

\"\"<\/p>\n

Below we kept our image on the austere side, providing some white space at the top and sizing it to provide a transition from our main graphic to the body text.<\/p>\n

\"\"<\/p>\n

Which looks best? That\u2019s a matter of preference, but the\u00a0default background or a simple variation of its color might still be your best choice. I ended up going back to a simple variation on the default \u201cblue wave\u201d as my top choice.<\/p>\n

Summary and suggestions<\/strong><\/p>\n