You can do allot with CSS color and layout options, but the real power is the ability to put a image background on just about any element of your page.  We've talked a little about this with banners and logos and will continue to talk about it because it is that important to your design.  For now we will just look at the background property and it's various values. Keep your PSG cheat sheet handy for a visual guide. 

Broken down backgrounds 
I will show you each property and then I'll show you the shorthand for incorporating all properties into one statement. 

Background color

To effect the background color of any block element is a simple as:

#header  {

background-color: #454545;

}

Background Image

You can put a image in the background of any element with "URL" just place the image URL inside of the "()". I sometimes will upload images onto my SocialGo Network, right click on them.. and tada! I have my Image URL.

#header  {

background-image: url(www.mysite.com/image.gif);

}

Background Repeat

The most powerful thing about the background image is that you can tell it to repeat vertically horizontally or both directions... or not to at all. Let's look at the three options.  You see the little green line bellow. Well it's small when by itself but if I repeat it horizontally, it makes the button you see bellow.

One small image:



Makes this when repeated (repeat-x):



Repeat horizontal and vertical

#header  {

background-image: url(www.mysite.com/image.gif);
background-repeat: repeat;

}

Repeat horizontal

#header  {

background-image: url(www.mysite.com/image.gif);
background-repeat: repeat-x;

}

Repeat Vertical

#header  {

background-image: url(www.mysite.com/image.gif);
background-repeat: repeat-y;

}

Background Position

The background position property is great for lining things up. You can use it on X and Y and no-repeat, But, it's a little different with each of these values. For instance if we have a image that is repeating horizontally (repeat-x) we can tell it to move up or down, but when we tell it to move right or left, it will only change the starting place of where it repeats.

The many variations of position

You can position a background image by it's x and y values. we can do this with percent, or pixels or just telling it "center" or "right". We tell it both the X and the Y in the same CSS statement.

#header  {

background-image: url(www.mysite.com/image.gif);
background-position: center left;

}

Here are all the possibilities when using a pre-defined position. Remember you are stating BOTH the X and the Y in the same value (top left)

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

 

Using percentage

You will want to use percentage when something may change size but you want the position of the image to stay relative to it's parent's position. You might use this when you have a arrow background in your nav, that needs to be in the same 52% position no matter how long your nav button is. Here is a picture to show you how I used it on SG's template.


  

You see, the magazine button is wider than the home button, but the arrow stays right in the center no matter how wide the button is stretched. Here is the CSS i used.  

#header  {

background-image: url(www.mysite.com/image.gif);
background-position: 50% bottom;

}

Background Shorthand

Believe it or not, we can compress all of that junk above into one pretty CSS property. Study bellow and see how I've incorporated all properties in one.

#header  {

background: #dfdfdf url(www.mysite.com/image.gif) no-repeat %50 bottom;

}

With one slight of hand I've put a background color, Image, repeat state and position in that order. That's the way to do it.

Coming soon FATBABY! That's right a truly liquid Socialgo Template, and it's easy to customize, so that you can work your existing graphics into a liquid layout. In the first release there will be numerous color schemes to pick from. I'll continue adding designs and color schemes as time goes on. 

FatBABY Squished to 700px wide.



FatBABY stretched to 1290px wide. 
 
 

And That's not ALL 

As with all PSG templates you will be assigned a special group where you will find plenty of ActionCODE add-ons like this FATbaby picture controller which allows you to upload any size picture (at a reasonable size) and it will automatically resize your picture depending on how big your FATbaby is stretched or squished, AND it puts a nifty little frame around all your pictures too. 

PICTURE CONTROLLER  700px

 

PICTURE CONTROLER 1290px

 

THIS POST HAS BEEN UPDATED > I was asked this question which is related to our earlier blog on hiding birthdays. People will usually gauge how good a group is on the size of it's member base -- this is true online and in the real world, kind of like a new restaurant with no cars in front of it. So how do you get them to take a look inside your groups without judging them before they hit the door? You hide the membership! Here is how it's done -

Normal:


You have two options you can hide the entire statement of who the owner is and how many members it has, or you can just hide the owners name and the members number. 

Hide the author and members statement:



  For this we will use our trusty display none, but to make sure we don't effect other elements on other pages, we will let our CSS know it's only on the groups page:

     
#groups-list 
.search-listing 
.listing-questions li  
{
 display: none; }

Hide just member number and author name:

 
 
To hide just the member number and author name we will use the "Strong" tag.

     
#groups-list 
.search-listing 
.listing-questions li strong  
{
 display: none; }

You will notice that this changes your layout a bit, and it should because when you hide something it takes it out of the line, the space that it once held is gone. So if you want to keep the formating just the same you can also just change the color of this text to the color of your background like so:

     
#groups-list 
.search-listing 
.listing-questions li  
{
 color: black!important;        }

You could just effect the member OR the author, but this would get into javascript which is a little to expansive for this post

Our last podcast looked at placing our logo in the header and creating a rollover effect. If you recall we had  to change the "header h1 a" into a block element. I said I would write a blog on block elements, and true to my word 67% of the time,  here we go. 

Play with Display
If your new to CSS, you've probably stayed away from the "Display" property. Well you might be missing out on a powerful tool. It only has to values, or three things it can do, so it's easy to remember . 

1. display: inline;
2. display: block;
3. displa; none; 

All three of these values are extremely useful. Think of the display:none that we used in last weeks tip on hiding elements on a page, like the birthday element that so many ladies hate... display:none; You can even hide sorts of stuff you don't want on your page and is not yet an option in the layout manager.

Block and Inline are just as powerful. Lets say you want the background color of a DIV with a ad or image in it to automatically span the width of your text, so as not to worry about setting an exact pixel width. You would use the INLINE value to do this, because a DIV is a block element.

The difference between Block and Inline These are the most common elements that are blocks, and it's pretty easy to see this because they are usually designed visually as blocks.

A Block element starts on it's own line. Think of everything on your web page like the flowing of text a paragraph. Block elements are when you hit the enter key and go to a new line. So if you have say a Block element like a H1 under a inline element (think text) your block element will drop down like you hit the enter key.

Here are some inline elements:

The main difference between a block and a inline is hight and width, or those are at-least the most effective differences. A inline element's height and width, line hight, and top and bottom margins CAN NOT be changed. It will also span the width always of the image or text and can't be changed. It also begins on the same line.. so no enter key.

Useful Block

Blocks are very useful for image replacement. Like we put a image inside of a inline element the "a" element. If you don't turn that "a" element into a block, there is no adjusting it's hight or width, so more than likely, you will not see your full image. So simply put display: block; as a property, and your set, now you can fit the "a" around your image, and it will be linkable. I use this allot in SocialGo Design.

Useful Inline A good way to use the inline value is in setting a Block element, say a DIV, to be inline, giving it a background color, and allowing it to span the width of that inline element. See, a Inline element will just go and go until something stops it, so you can allow that background color to go the width of the text and you don't even have to specify a width. So that's about it. Inline is kind of useful, you will find places for it as you get deeper in CSS, but Block is very useful, and a must in many situations.