Backgrounds
Changing The Background Image/Color
1. Background Pictures
#section_name { background: url('xxx'); }
2. Background Colors
#section_name { background: #XXX; }
#section_name { background: #XXX url('xxx'); }
The first changes just the background color, the second allows you to have a background color AND image. In order for the color to show around the image the image must be non-repeating.
3. Transparent ("no" backgrounds)
#section_name { background: transparent; }
#section_name { background: transparent url('xxx'); }
#section_name { background: none; }
The first makes the background invisible, the second allows you to have a partially invisible background AND image. In order for the transparent parts to show around the image the image must be non-repeating. The third code completely removes the background. If you are not using an image at all it's probably safest to use the third.
Repeating/Non-repeating the Background Image
#section_name { background: url('xxx') repeat; }
#section_name { background: url('xxx'); repeat: yes; }
Repeat- Repeats the whole image within the area.
No-Repeat- Does not repeat the image.
Repeat-x- Repeats the image horizontally only.
Repeat-y- Repeats the image vertically only.
Repeat:Yes
Positioning the Background Image
There are a few different ways you can position the image, which we will describe here.
#section_name { background: url('xxx') top; }
The possible positioning codes are:
Top
Bottom
Left
Right
Center
The background will always start at the left top, so if you want it top and right you would put:
#section_name { background: url('xxx') top right; }
Similarly you can combine any two that make sense together. (Since you obviously can't have it be top AND bottom).
#section_name { background: url('xxx'); position: 'see next section'; left: 0px; top: 0px; }
This is for a slightly more exact positioning of the image.
Replace the '0' with whatever integer you wish to use.
The first one is how far it is from the left, the second how far down it is from the top.
Background Positioning: Absolute/Relative
As you see in the previous code there is a tag which says "position: ' x x x';"
here you will place which type of positioning you want to use.
The possible 'position' codes are:
Absolute
Relative
Absolute- Means you are positioning the image in relation to its exact co-ordinates on the screen. Sometimes this causes errors in some browsers and does not always show correctly across all browsers, but it is the MOST exact for of positioning.
Relative- Means you are positioning the section relative to it’s containing box. So if you are positioning a section within the content section and are positioning it relatively, it would start counting from the top left corner of the content box, NOT the top left corner of the screen. This is a little less exact, but works better across browsers.
Static- The default position. Only used to override a set position, but you can use the above too, just fine instead.
Fixed- Similar to absolute but will not scroll.
Modifying Or Specifying the Dimensions of the Image
#section_name { background: url('xxx') 0px 0px; }
Similar to positioning just replace the '0' with the number you want. The first one is width, the second height. You can either put the actual dimensions of the image in, which helps keep consistency over browsers and also won't reduce the size if the image is larger than the section, OR you can modify the image size!
Note:
When using the repeat, no-repeat, top, bottom, left, right, center codes after a background image the semi-color goes AFTER THE CODES NOT after the last parenthesis.
Like so:
Good
#section_name { background: url('xxx') no-repeat center; }
Bad
#section_name { background: url('xxx'); no-repeat; center; }
HOWEVER, when using "position" codes or "repeat: yes;" (which I rarely use and rarely see anyone use "repeat: yes;" These codes DO go after the semi-colon after the closing parenthesis.
View User's Journal
CSS Profile Codes
This is a basic and advanced tutorial on how to CSS profiles.
 |
Unfrigginbelievable
Community Member |
Legalize