Click To Play

Picture Resize

Universal Blog rules

User Driven Blogs

Background color

#header  {

background-color: #454545;

}

Background Image

#header  {

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

}

Background Repeat

#header  {

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

}

#header  {

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

}

#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.

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

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

#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.

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

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

     
#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

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.

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.