Welcome Guest [Log In] [Register]
Viewing Single Post From: "Fix" the Background
PhranK Mar 15 2004, 01:34 PM
Member Avatar
דhe √oice øƒ Яeason
[ * * * * * * * * * ]
 If you want to do it with a tiled background image, add this somewhere in the BODY line of the CSS:

Code:
 
background-image:url(the url for your image);


If you'd like to use a large image and have it not tile (repeat across the screen), you can do the following:

The code for making it not repeat is:

Code:
 
background-repeat: no-repeat;


The code for centering it would be:

Code:
 
background-position: center center;


Yes, that's 2 centers.
You can specify the position by percentage (X% Y%), by units (Xpx Ypx), or by keyword (top left, top center, top right, center left, center center, center right, bottom left, bottom center or bottom right)


You can add all those in one line like so:

Code:
 
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000000; margin:0px 10px 0px 10px;
background-color: #ffffff; background-image: url(image url); background-repeat: no-repeat; background-position: center center; background-attachment:fixed }


Or you can put those all together in a shorthand version like so:

Code:
 
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000000; margin:0px 10px 0px 10px;
background: #ffffff url(image url) no-repeat center center fixed }
Offline Profile Quote Post
"Fix" the Background · Skinning Documentation