Almost every single CSS property supports the background property. This property alone gives CSS incredible aesthetic control over web layouts. But keep in mind that images are the biggest culprits in increasing page weight and slowing down load times. To help keep your pages trim, remember that you can use the same background image for as many elements on the page as you wish, your server will only have to serve up that image once.
Gradients are a popular choice for background images and they help out page weight in another significant way: they are repeatable. Take a look at the gradient below. To the left you can see how the gradient looks. To the right you can see that you can squish it down to only a single pixel in width and it will repeat horizontally just the same.
The image is 200 pixels tall, to accomodate for the growth of page elements. The bottom gradient is there in case the element grows really huge, the background will repeat gracefully vertically as well (or at least a little less jarring).
Now check out the example below. I have used this same image for the background of a header element, list item elements, and an anchor element. The anchor is especically fun, as you can set the background position to bottom instead of top on hover and get a pretty nice looking rollover effect.
Click here to see live example!
One Background Image, Many Applications
Labels: Advance CSS3
Search
Categories
- $ Cheap Price (2)
- $$ Price (3)
- $$$ Price (1)
- 2 Colum (1)
- 2 columns (2)
- 2008 (1)
- 3 columns (7)
- About CSS3 (8)
- Advance CSS3 (66)
- affiliate (1)
- ajax (11)
- ajax tutorial (4)
- asp tutorials (1)
- asp.NET (1)
- Avatars (2)
- blog action day (1)
- blog contest (4)
- blogger (5)
- blogger templates (2)
- blogging (3)
- button (1)
- color (1)
- color schemes (8)
- comment (1)
- css (3)
- css articles (6)
- CSS Aural (19)
- CSS Borders (19)
- CSS Classification (5)
- CSS Color and Backgrounds (11)
- CSS Dimensions (7)
- CSS Dynamic Content (5)
- CSS Font (8)
- CSS Generated Content (5)
- CSS International (19)
- CSS Lists (6)
- CSS Margins (5)
- CSS Outline (3)
- CSS Padding (5)
- CSS Positioning (11)
- CSS Printing (9)
- CSS Scrollbars (8)
- CSS Shortcuts (5)
- CSS Tables (6)
- CSS Text (13)
- css tips (26)
- css tools (10)
- CSS Tutorial (4)
- css tutorials (64)
- css3 (1)
- CSS3 Info (1)
- database (1)
- design copyright (1)
- design gadget (5)
- design review (3)
- design showcase (3)
- Design Tutorial (7)
- disqus (1)
- download (21)
- downloads (44)
- Emire (1)
- environment (1)
- eyovurc (1)
- flash (3)
- flash tutorial (1)
- Font (7)
- font review (5)
- Fonts (14)
- FREE Clip Art (1)
- free design box (9)
- FREE Photos (29)
- free templates (1)
- Free Themes (1)
- freelance (1)
- FreeMarker template error (1)
- Gallery (1)
- google chrome (1)
- graphic design (17)
- graphics (36)
- Hamasaki (1)
- HOT DEALS (1)
- how to (16)
- html (3)
- html tutorials (8)
- Humor (3)
- Icon (72)
- Icons (8)
- ie8 (3)
- Illustration (1)
- Illustrator (150)
- illustrator tutorial (2)
- Images (4)
- inspiration (19)
- Internet Tips (1)
- java script tutorial (1)
- jQuery (5)
- Miscs (4)
- money online (12)
- Orther (8)
- Photo A Day (1)
- Photo Work (3)
- photography (6)
- Photoshop (69)
- photoshop action (7)
- photoshop brushes (62)
- Photoshop Patterns (9)
- photoshop tutorial (14)
- Photoshop Tutorials (6)
- php tutorials (6)
- pl/sql tutorial (1)
- Popular Site (3)
- post reach (1)
- PowerPoint (2)
- resources (9)
- Simple (1)
- Spring Webflow (1)
- sql tutorial (1)
- Struts 1 vs Struts 2 (1)
- Struts 2 - AJAX (2)
- Struts 2 Example (4)
- Struts 2.0.14 (1)
- Struts 2.1.8 (1)
- Struts Errors (1)
- Struts Framework Comparison (1)
- templates (1)
- Templete (4)
- text effect (6)
- Texture (2)
- Tool Website (2)
- tools (6)
- tutorials (1)
- typography (4)
- Vector (13)
- viral linking (1)
- viral tagging (1)
- W3C CSS3 (26)
- Wallpaper (9)
- web design (51)
- web tool (6)
- Webdesign (7)
- WordPress (5)
- WordPress Theme (3)
- xml (3)