Image sizes

img {width: 150px; height: 150px;}

Background images

The background-image property allows you to place an image behind any HTML element. By default, a background image repeats to fill the whole box.

p {background-image: url("background-image: url("images/pattern.png"
)
;}

Note: in order for this to work on your club you need to have the closing ); on a line by itself, as shown above, if you're using it for something other than a club, this isn't necessary.

Repeating Background images

The background-repeat property can have 4 values.

repeat: This is the default; the image is repeat both horizontally and vertically.

repeat-x: The image is repeated horizontally only.

repeat-y: The image is repeated vertically only.

no-repeat: The image is shown only once.

Background Attachment

The background-attachment property can have 2 values.

fixed: This is the default; the image stays in the same position on the page.

scroll: The image moves up and down as the user scrolls up and down the page.

Background Position

When an image is not being repeated, you can use the background-position property to specify where in the element the image should be placed. It has a pair of values. The first represents the horizontal position and the second represents the vertical position. There's a total of 9 different possible values: 'left top', 'left center', 'left bottom', 'center top', 'center center', 'center bottom', 'right top', 'right center', 'right bottom'.

p {background-position: center right; background-repeat: no-repeat;}

Opacity

The opacity property is used to change the opacity/transparency.

img {opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */}

If you want to change the opacity when you hover over the image, please see the pseudo class tutorial.