CSS3 Examples

CSS BACKGROUND-POSITION-Y

Written by jon on 8:31 AM If a ‘background-image’ is specified, this property specifies the initial position on the Y-axis of the background image specified in the browser window if it is not continuously tiled in the element’s rendering box. A minimum value for this property indicates the upper side of the rendering box, and a maximum value is at the lower side. The X-axis component of the background position can be specified using the ‘background’, ‘background-position’ or ‘background-position-x’ properties.

Example

body { background-image: url( http://www.example.com/image.gif ); background-repeat: repeat-x; background-position-y: bottom }

Possible Values

Value Description [Percentage] Percentage is in reference to the dimensions of the box of the current element. Value specifies the percentage on BOTH the image and the canvas and may be negative (eg: 70% indicates the reference point 70% from the top side of the image is to be located at 70% from the top side of the element's rendering box [Length] Represents an absolute Y-coordinate position for the image and may be negative. Standard Absolute or Relative Length Units may be used here leftcenterright Keywords representing Y-axis screen positions for image placement

CSS BACKGROUND-POSITION-X

Written by jon on 8:30 AM If a ‘background-image’ is specified, this property specifies the initial position on the X-axis of the background image specified in the browser window if it is not continuously tiled in the element’s rendering box. A minimum value for this property indicates the left side of the rendering box, and a maximum value is at the right side. The Y-axis component of the background position can be specified using the ‘background’, ‘background-position’ or ‘background-position-y’ properties.

Example

div.marked { background-image: url(watermark.jpg); background-position-x: center }

Possible Values

Value Description [Percentage] Percentage is in reference to the dimensions of the box of the current element. Value specifies the percentage on BOTH the image and the canvas and may be negative (eg: 20% indicates the reference point 20% from the left side of the image is to be located at 20% from the left side of the element's rendering box [Length] Represents an absolute X-coordinate position for the image and may be negative. Standard Absolute or Relative Length Units may be used here leftcenterright Keywords representing X-axis screen positions for image placement

CSS BACKGROUND-POSITION

Written by jon on 8:29 AM The background-position property sets the starting position of a background image.

Inherited: No

Example

body { background-image: url(stars.gif); background-repeat: no-repeat; background-position: top left } body { background-image: url(stars.gif); background-repeat: no-repeat; background-position: 0% 0% }

Possible Values

Value Description top left top center top right center left center center center right bottom left bottom center bottom right If you only specify one keyword, the second value will be “center”. x-% y-% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. x-pos y-pos The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.

CSS BACKGROUND-ATTACHMENT

Written by jon on 8:28 AM The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

Inherited: No

Example

body { background-image: url(stars.gif); background-attachment: scroll }

Possible Values

Value Description scroll The background image moves when the rest of the page scrolls fixed The background image does not move when the rest of the page scrolls.

CSS BACKGROUND-REPEAT

Written by jon on 8:27 AM The background-repeat property sets if/how a background image will be repeated.
Inherited: No

Example

body { background-image: url(stars.gif); background-repeat: repeat-x }

Possible Values

Value Description repeat The background image will be repeated vertically and horizontally repeat-x The background image will be repeated horizontally repeat-y The background image will be repeated vertically no-repeat The background-image will be displayed only once

CSS BACKGROUND-IMAGE

Written by jon on 8:26 AM The background-image property sets an image as the background.Tip: Always set a background-color to be used if the image is unavailable.

Inherited: No

Example

body { background-image: url(stars.gif); background-color: #000000 }

Possible Values

Value Description url The path to an image none No background image

CSS BACKGROUND-COLOR

Written by jon on 8:25 AM The background-color property sets the background color of an element.
Inherited: No

Example

p {background-color: #00ff00}

Possible Values

Value Description color The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#ff0000) transparent The background color is transparent

CSS BACKGROUND

Written by jon on 8:24 AM The background property is a shorthand property for setting all background properties in one declaration.

Inherited: No

Example

body {background: #FF0000} body {background: url(stars.gif) no-repeat top} body {background: #00FF00 url(stars.gif) no-repeat fixed top}

Possible Values

Value Description background-color background-image background-repeat background-attachment background-position You can declare from one to five background properties in this declaration

CSS LAYER-BACKGROUND-IMAGE

Written by jon on 8:22 AM This value sets the background-image for the entire region of the current element. This proprietary property behaves in Netscape the way the ‘background-image’ property SHOULD behave, while the actual ‘background-image’ behavior is buggy in this regard. This property was invented to create the correct behavior.
The ‘background-image’ property only covers the content area of an element’s rendering box, and if a border is also used, there is a slight gap (2-3 pixels) between the background-image and the border area, where the surface of the parent element shines through.
The ‘layer-background-image’ covers the whole region specified by the element, including the gap area occurring for the ‘background-image’ property, and the entire dimension of the element specified by the ‘width’ and ‘height’ properties. Since this property is only understood by Netscape, and it fixes other buggy behavior, specifying both this and the ‘background-image’ property with the same value seems like a good idea.

Example

div { position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; background-image: url(bg2.gif); layer-background-image: url(bg1.gif); } < div STYLE='position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; layer-background-image: url(bg1.gif);'>text block< /div>

Possible Values

Value Description [url] It can be either an absolute or relative URL. Please see the section on URL Units for details on how to indicate a URL within a Style Sheet none No image is used as the background for the element

CSS COLOR

Written by jon on 8:21 AM The color property sets the color of a text.

Example

body {color: rgb(255,255,0)} body {color: #ffffff} body {color: red}

Possible Values

Value Description color The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#ff0000).

CSS LAYER-BACKGROUND-COLOR

Written by jon on 10:19 AM This value sets the background-color for the entire region of the current element. This proprietary property behaves in Netscape the way the ‘background-color’ property SHOULD behave, while the actual ‘background-color’ behavior is buggy in this regard. This property was invented to create the correct behavior.
The ‘background-color’ property only covers the content area of an element’s rendering box, and if a border is also used, there is a slight gap (2-3 pixels) between the ‘background-color’ and the border area, where the background-color of the parent element shines through.
The ‘layer-background-color’ covers the whole region specified by the element, including the gap area occurring for the ‘background-color’ property, and the entire dimension of the element specified by the ‘width’ and ‘height’ properties. Since this property is only understood by Netscape, and it fixes other buggy behavior, specifying both this and the ‘background-color’ property with the same value seems like a good idea.

Example

div { position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; background-color: blue; layer-background-color: blue; } <div STYLE=”position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; background-color: blue; layer-background-color: blue;”>text block</div>

Possible Values

Value Description Value Value Description [color] This is a representation of the values for Red/Green/Blue used to determine a final display color. Please see the section on Color Units for details on the various color specification schemes. transparent This specifies that the parent element background/image will shine through if one exists, else the system default background/image value is used.