Pages

CSS3 gradients let you display smooth transitions between two or more specified colors.
Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.
CSS3 defines two types of gradients:
  • Linear Gradients (goes down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)

CSS3 Linear Gradients

Using Angles

Using Multiple Color Stops

Using Transparency

Repeating a linear-gradient

CSS3 Radial Gradients

Set Shape

Use of Different Size Keywords

Repeating a radial-gradient

 

 

 

 

 

 

 

 

Related Pots

CSS3 Background Properties

Property Description CSS
background-clip Specifies the painting area of the background images 3
background-origin Specifies the positioning area of the background images 3
background-size Specifies the size of the background images. 3
 
+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu 

Related Pots

Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:
  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Example

A radial gradient with different size keywords:

 <!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Standard syntax (must be last) */
}

#grad2
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Standard syntax (must be last) */
}

#grad3
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Standard syntax (must be last) */
}

#grad4
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Radial Gradients - Use of different size keywords</h3>

<p><strong>closest-side:</strong></p>
<div id="grad1"></div>

<p><strong>farthest-side:</strong></p>
<div id="grad2"></div>

<p><strong>closest-corner:</strong></p>
<div id="grad3"></div>

<p><strong>farthest-corner (this is default):</strong></p>
<div id="grad4"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu 

Related Pots

Using Multiple Color Stops

The following example shows how to set multiple color stops:

Example

A linear gradient from top to bottom with multiple color stops:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(red, green, blue); /* For Safari */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax (must be last) */
}

#grad2
{
height:200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Safari */
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}

#grad3
{
height:200px;
background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* For Safari */
background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* For Firefox 3.6 to 15 */
background: linear-gradient(red 10%, green 85%, blue 90%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>3 Color Stops (evenly spaced)</h3>
<div id="grad1"></div>

<h3>7 Color Stops (evenly spaced)</h3>
<div id="grad2"></div>

<h3>3 Color Stops (not evenly spaced)</h3>
<div id="grad3"></div>

<p><strong>Note:</strong> Color stops are automatically spaced evenly when no percents are specified.</p>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

The following example shows how to create a linear gradient with the color of the rainbow and some text:

Example

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:55px;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Safari */
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx 3.6 to 15 */
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Gradient Background
</div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu  

Related Pots

Definition and Usage

The background-size property specifies the size of the background images.
Default value: auto
Inherited: no
Version: CSS3
JavaScript syntax: object.style.backgroundSize="60px 80px"

Syntax

background-size: length|percentage|cover|contain;
Example 
 <!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url("img_flwr.gif");
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

<p>Original image: <img src="img_flwr.gif" alt="Flowers" width="224" height="162" /></p>

</body>
</html>

Related Pots

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

Example

A radial gradient with the shape of a circle:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-radial-gradient(red, yellow, green); /* For Safari */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
}

#grad2
{
height:150px;
width:200px;
background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to 15 */
background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Radial Gradient - Shapes</h3>

<p><strong>Ellipse (this is default):</strong></p>
<div id="grad1"></div>

<p><strong>Circle:</strong></p>
<div id="grad2"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu  

Related Pots

Using Angles

If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).

Syntax

background: linear-gradient(angle, color-stop1, color-stop2);
The angle is specified as an angle between a horizontal line and the gradient line, going counter-clockwise. In other words, 0deg creates a bottom to top gradient, while 90deg generates a left to right gradient.
The following example shows how to use angles on linear gradients:

 

Example

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:100px;
background: -webkit-linear-gradient(0deg, red, blue); /* For Safari */
background: -o-linear-gradient(0deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, red, blue); /* Standard syntax (must be last) */
}
#grad2
{
height:100px;
background: -webkit-linear-gradient(90deg, red, blue); /* For Safari */
background: -o-linear-gradient(90deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(90deg, red, blue); /* Standard syntax (must be last) */
}

#grad3
{
height:100px;
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax (must be last) */
}

#grad4
{
height:100px;
background: -webkit-linear-gradient(-90deg, red, blue); /* For Safari */
background: -o-linear-gradient(-90deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Linear Gradients - Using Different Angles</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

 

Related Pots

Repeating a linear-gradient

The repeating-linear-gradient() function is used to repeat linear gradients:

Example

A repeating linear gradient:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Safari */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Opera 11.1 to 12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Firefox 3.6 to 15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Repeating Linear Gradient</h3>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu  

Related Pots

CSS3 Linear Gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Example of Linear Gradient:

Linear gradient

Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);
Linear Gradient - Top to Bottom (this is default)
The following example shows a linear gradient that starts at the top. It starts red, transitioning to blue:

Example

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(red, blue); /* For Safari */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to blue:</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

Linear Gradient - Left to Right
The following example shows a linear gradient that starts from the left. It starts red, transitioning to blue:

Example

A linear gradient from left to right:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left, red , blue); /* For Safari */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Linear Gradient - Left to Right</h3>
<p>This linear gradient starts at the left. It starts red, transitioning to blue:</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

Linear Gradient - Diagonal
You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.
The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to blue:

Example

 <!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left top, red , blue); /* For Safari */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts red, transitioning to blue:</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>
+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu  

Related Pots

A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops. You can also specify the gradient's center, shape (circle or ellipse) as well as its size. By default, center is center, shape is ellipse, and size is farthest-corner.

Example of Radial Gradient:
Radial gradient

Syntax

background: radial-gradient(center, shape size, start-color, ..., last-color);
Radial Gradient - Evenly Spaced Color Stops (this is default)

Example

A radial gradient with evenly spaced color stops:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-radial-gradient(red, green, blue); /* Safari */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

Radial Gradient - Differently Spaced Color Stops

Example

A radial gradient with differently spaced color stops:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6 to 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Radial Gradient - Differently Spaced Color Stops</h3>
<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu  

Related Pots

Using Transparency

CSS3 gradients also support transparency, which can be used to create fading effects.
To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).
The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning to full color red:

 

 

 

Example

A linear gradient from left to right, with transparency:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Linear Gradient - Transparency</h3>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu  

Related Pots

Repeating a radial-gradient

The repeating-radial-gradient() function is used to repeat radial gradients:

Example

A repeating radial gradient:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Safari */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Opera 11.1 to 12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Firefox 3.6 to 15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Repeating Radial Gradient</h3>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu  

Related Pots

Definition and Usage

The background-origin property specifies what the background-position property should be relative to.
Note: If the background-attachment property for the background image is "fixed", this property has no effect.
Default value: padding-box
Inherited: no
Version: CSS3
JavaScript syntax: object.style.backgroundOrigin="content-box"

Syntax

background-origin: padding-box|border-box|content-box;

Example

 <!DOCTYPE html>
<html>
<head>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>

<p>background-origin:border-box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<p>background-origin:content-box:</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Related Pots

Definition and Usage

The background-clip property specifies the painting area of the background.
Default value: border-box
Inherited: no
Version: CSS3
JavaScript syntax: object.style.backgroundClip="content-box"

Syntax

background-clip: border-box|padding-box|content-box;

Example

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}
</style>
</head>
<body>

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

</body>
</html>

Related Pots

 Example

<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>

<p>background-origin:border-box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<p>background-origin:content-box:</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

 +CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu 

Related Pots

 Example 2

<!DOCTYPE html>
<html>
<head>
<style>
div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
</style>
</head>
<body>

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

</body>
</html>

+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu 

Related Pots

<html>
<head>
<style>
body
{
background:url(img_tree.gif),url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</body>
</html>
<!DOCTYPE html>

+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu  

Related Pots

Example 1 

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

<p>Original image: <img src="img_flwr.gif" alt="Flowers" width="224" height="162"></p>

</body>
</html>

+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu 

Related Pots

Example

Specify an image as the border around a div element:
div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari
The border-image property is supported in Firefox, Chrome, and Safari 6.
Opera supports an alternative, the -o-border-image property.
Safari 5 supports an alternative, the -webkit-border-image property.

Definition and Usage

The border-image property is a shorthand property for setting the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.
Omitted values are set to their default values.
Tip: Use the border-image-* properties to construct beautiful scalable buttons!
Default value: none 100% 1 0 stretch
Inherited: no
Version: CSS3
JavaScript syntax: object.style.borderImage="url(border.png) 30 30 round"

Syntax

border-image: source slice width outset repeat;

Value Description
border-image-source The path to the image to be used as a border
border-image-slice The inward offsets of the image-border
border-image-width The widths of the image-border
border-image-outset The amount by which the border image area extends beyond the border box
border-image-repeat Whether the image-border should be repeated, rounded or stretched

 +CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu 

Related Pots

Flag Counter
HomeCSS3
| Copyright © 2013 Remote Tutor