Customize your background

Level: Advanced

In this tutorial we’ll learn how to add a custom background to your Sandvox website. We will begin with a small pattern that will be tiled both horizontally and vertically to the whole website.

Then we’ll try something more complex with larger images and different patterns for different pages.

What you need

For this first part you need:

  1. Sandvox and a compatible Design. We will use Grafite for this exercise.
  2. An image, possibly a repetitive pattern – or anything that looks good if tiled.
  3. An FTP client.
Please remember that whatever you do, it’s your own responsibility to keep a backup copy of your data and to make things work: this is just a collection of examples and in real life situations things may look pretty different.

1. Check how your website looks with a custom background

We need to know if our Design is suitable for this customization. Each Design has its own features and styles, including page, body and content background. Moreover, their background can be created either with images or with CSS code.

Before we waste a lot of time only to discover that the result is awful, we need to know how our website looks with a background that wasn’t planned by the developer. We use Grafite for this test, but you can try with any Design of your choice if it looks good.

Let’s start from scratch: create a new website in Sandvox, select Grafite, add some placeholder text, create a couple of empty pages then open “Site Code Injection…” from the “Edit” menu.

Into the “Style Sheet” tab paste this code:

body {background-color:red;}

Move to another page or hit “cmd-R” to reload.

bgred

As you can see, the background is now red but the page content is as we remember. Some Designs have a transparent background and you would see red parts all over the page. These Designs are not suitable for this job (they could be, but they would require some CSS adjustment and I will not cover this part here).

So, Grafite is ok, we can proceed.

2. Choose your background image

If we just need a different background color, we’re done! Just change “red” to the color of your choice and that’s all (This tutorial about colors can be helpful).

But we want to go further and use an image instead. Images are tricky, because you can embed code into the page but images have to be somewhere. And you have to put them there. They need to be on the Internet.

There are many ways to do this and we will not choose the simplest one – but we are trying to learn something here, aren’t we? Once you master this topic, you’ll be able to solve a lot of problems on your own and to make your choices with much more freedom.

Let’s start with something simple: a repetitive pattern. You can find a lot of them online or you can create your own with most graphic programs. I created mine with a simple App called Patterno, but just because I’m lazy. Here it is:

stripes

As you already know, there’s no way to tell Sandvox you want this image as a background. We need to upload it somewhere and use Code Injection.

3. Upload your image

For this step, we need an FTP client. Many FTP clients are available at different price ranges. Some of them are free – like Cyberduck – many others can be found on the AppStore. My preference goes to Transmit: it’s more expensive but it’s very simple to use, fast, and has a friendly GUI. Any FTP client will do the job, anyway.

You can upload your image anywhere (what’s important is just its URL – its internet address), but we will upload it on the same server of our website. This will improve the site performance and we keep all our files together.

Click on the “Setup host” button on your Sandvox Toolbar.

ftpsandvox

The info you use for these fields are the same you need for your FTP client (in my case, the website will be published on http://therabb.it/, inside the remote folder “tutorials/background/”):

  1. an ftp address
  2. an username
  3. a password

Open your FTP client and create a new connection with the same address, username and password you use for Sandvox. This is how it looks in Transmit:

ftpinfo

Publish your website from Sandvox. Then connect with your FTP client. If everything is ok, you will be able to see and navigate through all your remote files:

remotefiles

OK, we’re doing great! We were looking for just a cosmetic fix and now we have absolute and permanent control on everything on our server! We can upload, download, delete, move, rename and add files and folders.

Most of the times these actions aren’t needed, but sometimes they turn to be useful. For example when we want to force-delete a page we removed in Sandvox but that still remains online even if no link point to it. It’s always good to have a backup plan.

Now back to our image. You can just drag and drop it on the remote window, but I like to keep things organized so I will create a new folder (most clients allow you to do this just with a right-click) and call it “backgrounds”. My image goes there:

remoteimage

Here we go. Let’s check its URL now. It should be the same URL as our website, to which we will append its remote path (the folder or subfolders inside which it is placed). In my case:

http://therabb.it/tutorials/background/backgrounds/stripes.png

Yes, it’s there. We know it’s online and we know its URL.

4. Use your image as a background

Let’s go back to Sandvox. Open again the “Site Code Injection” window and change the test code we used at the beginning with this code:

body {background:url(http://your.image.url) 0 0 repeat;}

Which in my case is:

body {background:url(http://therabb.it/tutorials/background/backgrounds/stripes.png) 0 0 repeat;}

Move to another page or reload: it works!

finalcode

Check that “Load data from the Internet” is selected in your Sandvox Preferences!

More options

Now let’s play a bit more with our options. So far, we can add a repetitive background image to our website. We can do more.

Use a large image

Nobody forces us to use a pattern, we can use a huge photo; it’s not optimal in terms of performance, but some people love it.

Choose the repetition pattern

The image can be tiled or not: just change “repeat” to one of the following options:

repeat-x tiled only horizontally
repeat-y tiled only vertically
no-repeat not tiled at all

Example:

body {background:url(http://therabb.it/tutorials/background/backgrounds/stripes.png) 0 0 no-repeat;}

Use different backgrounds for different pages

The procedure is very similar, with just a few differences. first of all, you will need more than one image, of course. Upload all of them and keep in mind their URLs.

Then, you need to use “Page Code Injection…” instead of Site Code Injection. As you should know if you read this tutorial, Page Code Injection doesn’t have a “Style Sheet” section (because the code is embedded only in that page). So you need to add it into the “Head Area”, lower field, included between the <style> and </style> tags. That’s it.

What now?

With the help of an FTP program you have much more control on your website: you can troubleshoot, fix, delete files, check how your website works or understand why it doesn’t.

Combined with some basic CSS skills, you can also use images to change the look of your website. We worked on the background image here, but the same principles work for banners, for example.

Only one huge warning: don’t delete files or folders via FTP if you’re not sure about what you’re doing! You can delete important files needed for your website to run.