«sad.ark.tutorials.backgrounds»

Fixed / Non-Tiling Backgrounds

Let's talk about having a background image that you don't want to tile. See ya next step.

Non-Tiling Backgrounds

First, you need to create a style sheet to control the background for your page or pages. Do so by clicking on the stair-step-looking icon in the top right of your page window. It looks like this:

Now, in the CSS window that it opened, click on the arrow in the top right and select New Style > body.

Now we get to set up the background. Really easy to do. Click on the 'body' tag you just added to your CSS window. When you have clicked it, the inspector window will change to show all the options you can modify for your body tag. Look at the following inspector pallet window:

Click on the checkerboard button. This is where we modify the background image settings. This is how I set up the background image you will see on the example page at the link below. First, tell it where to find your image by clicking on the image button and then find your image with the point & link super-stretchy snake linker mechanism. Now your page should be showing a background image tiling all over like it was your shower. Let's fix that. Second, tell GoLive if you want your image to tile (we dont for this) by using the repeat pop-up and select once. This essentially tells GL to only apply the image once. Third, do you want the background to scroll with the page as it moves? Me either. It looks so much cooler if it just stays put and the content floats over the top. In the Attatch pop-up select FIXED. Finally, where do you want it? This is cool, you can position your image anywhere on the page, by percent, or by pixel. I've told my image to be 200 pixels from the top of the page and -400 pixels from the side. Yes! I know! It is actually positioning this image off the page! Not that you want to have users downloading a ton of content they will never see, but you can do it!

Preview in browser and it's a wrap! HERE is the finsihed page.

Apply this to a single table or cell

OK, another request while we're here. What if you only wanted to apply a background to a table or table cell? All this is easy with the table inspector pallet but you cannot control tiling. If you want a background in a table cell that does not tile, follow these next few steps.

Open up your style sheet like we talked about above. This time, we are going to make a new class to control our table fill. Click on the '•' button in the window above (not actually this window, but the one on your own GoLive app because this is just an image -- just kidding, but really, this one wont work). GoLive will add a blank class for you. Rename it to something useful to you. I'll call mine '.tablefill'. Make sure you have a period at the beginning of the name.

Now we are going to set up our styles for this new class. Do so by clicking on your new class and watch the inspector pallet change to the above picture. First, click on the checkerboard-looking button. This is our background editor. 1) Tell GoLive where to find the image you want in your background. 2) Since the image isn't going to tile, you may (or may not) want to fill the table or cell with a color depending on how you built your image and what you are going for. 3) Simply tell GoLive to only repeat the image once. Now you are all set here and we just need to apply this to our table.

Drag a table onto your page if you don't have one yet. Next, you are going to need the CSS window. This holds all your styles for you create and makes applying them quite easy. In your menu, go to Window > CSS to open it up. Next, select your table and the CSS window will show the class you made earlier. With the table selected, click in the box next to your style. This will apply the new background to your table. If you are watching the table in your page, note that it may not be showing your background. To see it, you need to preview the page in your browser. And thats it! Here is an example of how I've done this HERE.