Small Snap! Logo Snap! Websites

Work in progress
Snap! C++

Incredible Websites for Incredible People

How can I place a picture in the background of one of my posts?

When you use a paid version of Snap!, there is a button called "Source" at the top-left of your editor toolbar. Clicking on that button brings you into the HTML editor. We will need to tweak the HTML to get the image to show up as expected.

One important note: the teaser may be in the way, you probably do not want to show the background image in the teaser so you'll want to duplicate the teaser content at the top in order to properly center the background image.

First of all, make sure to download your background image by clicking on the landscape button then on Browse. Once in the file manager, click on Browse to search the picture on your hard drive. Select it and click Open. Back in the file manager, click on Upload to actually get the picture on your website. It will appear at the bottom right. Click on it to send it to the editor pop-up window.

Now that you've got the image this way, notice the URL on the left of the Browse button of the pop-up window. Click in that text field, select the whole text and then click Copy (generally Ctrl-C or right click and then Copy in the context menu.)

You can cancel the image insertion since we are about to insert a background, not the image as itself.

We're ready to click on that Source button. If you have a teaser, search for the text <!--break--> because you want to insert your background in the full view (i.e. after the <!--break--> delimiter) and not in the teaser.

So either at the very top or after the teaser break enter the following:

<div style="background: url(<paste the path to the image>) no-repeat 50% 50%;">

Then, at the end of the page, include the tag closure: </div>.

If you inserted the background image in the teaser, place the closure right before the <!--break-->, otherwise it won't work right..

To see the result immediately, click on the Source button to go back to the WYSIWYG editor.

Note that to work properly, you want to make the background image main color very close to the theme background or very transparent (i.e. 80% or more.) Not doing so will most certainly render the reading of your text very difficult if not impossible.

The entries after the url() specification are: (a) whether to repeat the image and how, (b) the horizontal position, and (c) the vertical position. Note that the positions are specific to the post area you're writing into. You won't be able to place this background behind the entire screen.

The repeat definition can be one of the following:

  • no-repeat—appears just once
  • repeat-x—repeats horizontally, once vertically
  • repeat-y—repeats vertically, once horizontally
  • repeat—this is the default, it tiles the background all over

The position can be specified as a percent or a pixel position (i.e. 30px 150px.) Remember that each user will have a different browser, font size, color handling1, and a few other such things. So don't try to align everything perfectly if the position somehow depends on the size of the content (maybe long titles appear on two lines on such and such computers.)

  • 1. Color handling is often a problem on Mac OS/X because the processing includes the application of the different color scheme as defined by the theme author. In other words, it may change the colors of your image (for the better or the worst.)