How to Change Your Site's Background to an Image

Some teams would rather use an image or photo as their site's background, rather than a color.  With this step-by-step guide, we offer two options for changing your site's settings to use a photo or graphic image of your choice.  With option 1, we show you how to change just the background image and keep the default colors for the menu, navigation and announcements. With option 2, we show you how to change the background to a photo AND customize the colors of your menu, navigation and announcements.

Select your image

First, you will need the URL or image location of your background photo. You can upload a background photo (JPG, GIF or PNG) to Manage Team > Settings > Uploaded Files, or use another location for storage. You’ll want a reasonably large image, on the order of 1600px wide and possibly 1000px tall. Copy the image location or URL of the file you want to use to your clipboard (you can usually right-click the image to get the image location URL). If you use SwimTopia’s Uploaded Files, the url will have a “?” followed by some text. You’ll want the url up to, but not including that “?”.

 

1) If you'd like to use the default colors that come with your SwimTopia site (menu bars, sidebars, titles, links, etc.):

Go to Manage Team > Team Site > Site Settings > Advanced and paste the following code in the Custom CSS text box, and replace [paste image location here] with the URL you just copied (be sure to remove the brackets [ ]). Remove any other background CSS.

body {
background-color: #cccccc;
background-image: url(//[paste image URL - remove the https://]);
background-attachment: fixed; }

Click on "Save" at the bottom of the screen.

 

2) If you'd like to customize the color scheme of your SwimTopia site:

Follow the instructions shown in our Help Center article about how to change your color scheme using our color scheme templateNote: the template asks you for a background color, but that color will only be displayed if your image does not fill the screen.

Once you've followed step 9 and have pasted the Sassmeister output into the Custom CSS box at Manage Team > Team Site > Site Settings > Advanced, you will add your background image:

Near the top of your CSS file, you'll find the following lines:

/* Main Background */
body {
  background-color: [your color code];
}

Insert the location of your photo and replace [paste image location here] with the URL location of your image (be sure to remove the brackets [ ]) so that this section looks like this:

/* Main Background */
body {
  background-color: [your color code];
  background-image: url(//[paste image URL - remove the https://]);
 background-attachment: fixed;

}

Click on "Save" at the bottom of the screen.

 

Your image will be in the background of your site:

 

 

Note:  if

fixed

is not the perfect solution, you can change the size of your photo, or experiment with options such as

no-repeat, top

and

center

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk