Welcome, come on in. To your right, you'll find a fine array of very good resources for web-based design. I've done a lot of research, continue to do more, and would love to hear from you if you've found other great design sites. Please don't hesitate to email me with questions or link/article suggestions. That's why we're here!
Saturday, November 26
What's that in the background?
Background images are different from regular images. That picture of your puppy peeing on the new carpeting is a regular image. You post it, and maybe you add some text about how much you love your pet, no matter how bad he is. Your Profile Image is also a standard image, displayed inline with the rest of your Profile text. (That just means the image falls in line with whatever comes before and after it in your page's source code.) When you define a background image, though, you are creating a type of wallpaper. You all know about wallpaper, don't you? The difference is, you can put stuff over or on top of it, just like in your house (or the screen of your computer, for example).
The other difference lies in how your browser displays those images. When you posted your puppy pic you wanted just one copy to show, and that's what you got. But background images are displayed as TILED, unless you specify "no-repeat." Fancy backgrounds and interesting borders are often composed of a small, single image repeated either all over the page or in a straight line up or down. These tricks call for a bit more attention to detail than a simple photo-post. For one thing, when you compose a post the internal post-editor writes all the code for you, based on what you chose for size and position when you uploaded your photo. If you check Edit Html (next to "Compose") before you post an uploaded photo, you can read the code that was placed there for you.
The safest place to specify a background image is in your Style Sheet, the same place we plundered before to change colors in our last series. Every division in your Style Sheet (body, content, sidebar, etc) can have its own background image, just as it can have its own background color. The word background, followed by an original color selection, then by a URL for an image (that image's online location), will pull in that image for you when the page loads. It's good to specify a background color, just in case the pic you picked won't load, for whatever reason. There's one more important step, though.
If you don't tell the browser what to do with your background image, the browser will repeat it all over the section your defined. That's called tiling, just like in the bathroom in your old apartment. For tiny, basic images that can be fun. But if you want your picture to show only once, you say "no-repeat." Not out load, but like this:
The other difference lies in how your browser displays those images. When you posted your puppy pic you wanted just one copy to show, and that's what you got. But background images are displayed as TILED, unless you specify "no-repeat." Fancy backgrounds and interesting borders are often composed of a small, single image repeated either all over the page or in a straight line up or down. These tricks call for a bit more attention to detail than a simple photo-post. For one thing, when you compose a post the internal post-editor writes all the code for you, based on what you chose for size and position when you uploaded your photo. If you check Edit Html (next to "Compose") before you post an uploaded photo, you can read the code that was placed there for you.
The safest place to specify a background image is in your Style Sheet, the same place we plundered before to change colors in our last series. Every division in your Style Sheet (body, content, sidebar, etc) can have its own background image, just as it can have its own background color. The word background, followed by an original color selection, then by a URL for an image (that image's online location), will pull in that image for you when the page loads. It's good to specify a background color, just in case the pic you picked won't load, for whatever reason. There's one more important step, though.
If you don't tell the browser what to do with your background image, the browser will repeat it all over the section your defined. That's called tiling, just like in the bathroom in your old apartment. For tiny, basic images that can be fun. But if you want your picture to show only once, you say "no-repeat." Not out load, but like this:
background: url("www.photoplace/folder/photoname")no-repeat;
You'll have to supply the locations, of course. You can see a clear example of "no-repeat" at the top of this website, where our logo is displayed. Now, if you want your image to repeat left-to-right, in a border for instance, write it this way:
background: url("www.photoplace/folder/photoname") repeat-x;
If you remember your high-school math, "x" is across. So, then, "y" would be down, huh? Like this:
background: url("www.photoplace/folder/photoname") repeat-y;
That's not so difficult at all, is it? (For an example of "repeat-y" just look down the far-left side of this page.)
There's more to it than that, if you need to tweak your image's size or location, but those are the basics, and they work just fine most of the time. If the image you want is already online, in your photo gallery perhaps, and it has its own distinct location, you can simply paste in the URL. Otherwise, you can upload your picture or artwork directly into a post. Click Edit Html and copy the picture's location (read between the quotes). Add the information to your template, in the division where you want it, and see if you like the results. You can always choose "Clear Edits" to reverse your actions. Try it, and come back.
