Perfect Full Page Background Image. Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised.
Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo CSS-Only Technique #1 Big thanks, as usual, to Doug Neiner for this alternate version.
CSS3 transitions, transforms and animations. Browser Support for CSS transitions How to use transitions If you haven't used transitions before, here's a brief introduction.
On the element you want to have animate, add the following CSS: There is a lot of duplication due to vendor prefixes - until the specification if finalised, this will persist. If this bothers you, there are various tools such as CSS Scaffold, LESS, or my preference - SASS, that allow you to define mixins to avoid repetitive code. Another approach is simply to write the CSS without the prefixes, then use Lea Verou's -prefix-free to add them in at runtime. Something you definitely shouldn't do is to only include the webkit prefix. It's worth noting as well that there isn't an -ms- prefix on these properties. The syntax is pretty straightforward, you specify the property you want to animate, all or border-radius or color or whatever, the time to run, then the transition timing function.
Whenever any property changes, then it will animate instead of changing directly. Using CSS transitions - CSS. This is an experimental technologyBecause this technology's specification has not stabilized, check the compatibility table for usage in various browsers.
Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes. CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized. Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser. Which CSS properties are animatable? HTML Content. CSS Color Codes.
Use the following color picker or color charts to pick a color that you can use within your CSS code.
The color picker provides the color values in hexadecimal and RGB. The color chart provides them in hexadecimal, RGB, and their color names. Color Picker Basic CSS Colors Here is a table of the basic color names that have been in CSS since CSS1 (except orange, which was added in CSS 2.1). Try clicking on a value. CSS Color Names Here is a full list of the CSS named colors as specified in CSS3 (CSS Color Module Level 4). How to use these Colors You can apply any of these colors to a website or blog by using the relevant CSS code. To set a background color, use background-color. Take blue for example. Below are quick CSS code examples for applying this color to various HTML elements. Check out some basic color code examples using color names in the online editor.
In Hexadecimal Notation Here is the same color, but this time using hexadecimal notation instead of the color name.