Complete CSS Tutorial
| First Step - Beginner CSS | Second Step - Intermediate CSS | Third & Final Step - Advanced CSS |
|---|---|---|
| 1. Applying CSS | 1. Class and ID Selectors | 1. Display |
| 2. Selectors, Properties, and Values | 2. Grouping and Nesting | 2. Page Layout |
| 3. Colors | 3. Pseudo Classes | 3. At-Rules |
| 4. Text | 4. Shorthand Properties | 4. Pseudo Elements |
| 5. Margins and Padding | 5. Background-images | 5. Specificity |
| 6. Borders | ||
| 7. Putting It All Together |
There are a number of properties involved in the manipulation of background images
.
Luckily, the property
Teach Yourself by BH24 HTML Editor Tool!
This amalgamates these properties:
Background-images can be used in most HTML elements - not just for the whole page (body) and can be used for simple but effective results, such as shaped corners.
background can deal with them all. body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
} Teach Yourself by BH24 HTML Editor Tool!
This amalgamates these properties:
background-color, which we have come across before.background-image, which is the location of the image itself.background-repeat, which is how the image repeats itself. This can berepeat(equivalent to a 'tile' effect across the whole background),repeat-y(repeating on the 'y-axis', above and below),repeat-x(repeating on the 'x-axis', side-by-side) orno-repeat(which shows just one instance of the image).background-position, which can betop,center,bottom,left,rightor any sensible combination, such as above.
 |
| CSS Tutorial by BH24 |
Background-images can be used in most HTML elements - not just for the whole page (body) and can be used for simple but effective results, such as shaped corners.
It is easy to get carried away with background images and plaster
them all over your web pages. Some visually hyperactive people might
believe it looks good to have a full-on brightly coloured photograph
tiled across the background of a page, giving the user a Mensa-esque
challenge in deciphering the foreground text. This is an extreme
example, but the fact is that the most user-friendly, readable text is
black on a plain white background or white on a plain black background
(there is also a suggestion that a slightly off-white or off-black
background is better as this reduces glare).
So, the best use of background images is either to use them where there will be no content over the top or making the background image very light, which would also reduce the file size of the image, because there should be less colours involved (supposing you are using an indexed-colour format, such as GIF).
So, the best use of background images is either to use them where there will be no content over the top or making the background image very light, which would also reduce the file size of the image, because there should be less colours involved (supposing you are using an indexed-colour format, such as GIF).