installing a custom image background.

So today, we're going to learn how to do exactly that. This code to CSS, once learned, can be applied just about anywhere, and you'll have endless fun. Whether it be post title hovers, accordion backgrounds, post footers... you name it, you can add a background there, and it will look awesome.

providing it's a good background. 

So. To install a background, we need to use this thing called DIRECT LINK for a photo. see here....

 I use Photobucket to upload photos. I love how fast it loads. I'd recommend that or Imgur. Whatever you do, don't use Flickr- it's not very dependable for direct links. :) 

So. On Photobucket, as illustrated above, when you hover over the photo, that little box pops up. I highlighted the text area for the Direct Link. There's lots of codes there, use the Direct Link. I'm trying to grind that in here. DIRECT LINK. 

Okay. This photo's direct link is this: http://i1236.photobucket.com/albums/ff459/iluvcameras/images17.jpg. 

You'll be using that as your background for this tutorial. Part of it, anyways. 

   This is what code you'll be using. You can search (ctrl+f)  "body." Here's what the codes looks like right before you edit it, in basic Minima. 

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

You'll change it... slightly. You'll add a slight code. Compare!

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor url(
http://i1236.photobucket.com/albums/ff459/iluvcameras/images17.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

As you've noticed, we added the tag for a background image. It's a CSS element. (wanna read more?)
This is the tag:

background:url('your-DIRECT-LINK-here');

Just ignore the $bgcolor part, the image will override the color settings.
This is what it will look like, after you install it.

It's simple. However, just a few stipulations.

This code, it's similar what Template Designer does for you. If you upload a 200x200px sized image, it will repeat it for you. It will either look awesome or awful. IF you have an image that is the normal size for a background, and you don't want it moving, or repeating itself, then you're going to have to add a few other codes. Don't worry, it's not hard.

background-repeat:no-repeat;
background-position:center;

That's just an example. Background-Position can be bottom, top, left, right, top center, bottom center, top right, bottom right, or whatever combination you can come up with. If you do want your background to repeat, just delete that Background-Repeat code. This is what it will look like after adding the above code.

You see? It doesn't repeat itself, and it's smack dab in the center.

Another thing you can do to customize your background - change it from fixed to scroll, or vice versa. If your background is fixed, it will stay in the same place while the rest of your page moves when you scroll down. Otherwise, the default is for both parts to scroll down. Just add this line of code:

background-position:fixed;

or switch out the last word for scroll.

So, step by step.

For an Image Background:

1. Upload your background to an image server- say photobucket.com or imgur.com
2. Find the CSS code background: $bgcolor; under "body". 
3. Copy/Paste the DIRECT LINK into this code, before the semicolon: url('YOUR-DIRECT-LINK-HERE')
4. Click preview. If it suits your fancy, click Save. 
5. Enjoy your new background. :)

If you think this all looks like too many lines of code, here's a hint: you can combine all the background settings into one line.

background: $bgcolor url(directlink.jpg) repeat scroll top center;

Make sense? As always, it never will make full sense until you dive right into it and make sense of it yourself... figuring it out. Keep at it.
Questions? Email us at writethegeeks@hotmail.com.