Home arrow Style Sheets arrow Page 4 - CSS Shorthand at a Glance

CSS Shorthand at a Glance

What could be simpler and faster than using CSS to set up your website? Using CSS shorthand to set up your website. While not all browsers support all of CSS shorthand's features, enough of them are supported to allow you to write tighter code, and create a website that loads more quickly.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 32
February 08, 2005
  1. · CSS Shorthand at a Glance
  2. · Basic CSS rules
  3. · Font shorthand property
  4. · Background shorthand property
  5. · Margin shorthand property
  6. · Padding shorthand property
  7. · Border shorthand property
  8. · List-style shorthand property

print this article

CSS Shorthand at a Glance - Background shorthand property
(Page 4 of 8 )

In order to implement the "background" shorthand property, the syntax is:

background: background-color | background-image | background-repeat | background-attachment | background-position;

As its name suggests, the "background-color" property sets the background color of the selected element. It may be set to any HTML color code or name, or transparent.

The  "background-image" property sets the background image for the selected element. It may be set to a URL or "none."

Possible values for the "background-repeat" property are: "repeat-x" (background image is tiled horizontally), "repeat-y" (background image is tiled vertically), "repeat " (both ways), and "no-repeat" (not tiled at all).

Regarding the "background-attachmentĒ property, it sets whether the background image of the selected element scrolls with it or remains fixed while the elementís contents scroll over it. This property can be set to "fixed" or "scroll."

Finally, the values for "background-position" allow us to specify the position of the top-left corner of the background image. We can specify one or two percentages, lengths or positions, where the first specifies the horizontal position and the second specifies the vertical position. If the vertical position is not specified, itís taken to be 50%.

Once again, letís code a couple of examples:

background: #00f url("bg.gif") repeat-x center left;

background: #fff url("bg.gif") no-repeat fixed center center;

Here weíve specified a blue background, and a background image that will be tiled horizontally (across the X axis), horizontally positioned at the center and vertically positioned at the left of the element.

In the second example, weíve assigned a white background, using a background image that wonít be tiled at all. The background image will be horizontally and vertically positioned at the center of the element. The "fixed" property indicates that the image will remain fixed as the elementís contents scroll over it.

Now, itís time to have a look at the next CSS shorthand property.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials