Toggle navigation
TUTORIAL HOME
CSS Image Gallery
❮ Previous Next ❯
CSS can be used to create an image gallery.

Add a description of the image here
Add a description of the image here
Add a description of the image here
Add a description of the image here
Image Gallery
The following image gallery is created with CSS:

Example

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

»
More Examples
Responsive Image Gallery
How to use CSS3 media queries to create a responsive image gallery.

»

❮ Previous Next ❯

Toggle navigation
TUTORIAL HOME
CSS Image Sprites
❮ Previous Next ❯
Image Sprites
An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

Image Sprites – Simple Example
Instead of using three separate images, we use this single image (“img_navsprites.gif”):

With CSS, we can show just the part of the image we need.

In the following example the CSS specifies which part of the “img_navsprites.gif” image to show:

Example
#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}
»
Example explained:

– Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS
width: 46px; height: 44px; – Defines the portion of the image we want to use
background: url(img_navsprites.gif) 0 0; – Defines the background image and its position (left 0px, top 0px)
This is the easiest way to use image sprites, now we want to expand it by using links and hover effects.

Image Sprites – Create a Navigation List
We want to use the sprite image (“img_navsprites.gif”) to create a navigation list.

We will use an HTML list, because it can be a link and also supports a background image:

Example
#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url(‘img_navsprites.gif’) 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url(‘img_navsprites.gif’) -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url(‘img_navsprites.gif’) -91px 0;
}
»
Example explained:

#navlist {position:relative;} – position is set to relative to allow absolute positioning inside it
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} – margin and padding is set to 0, list-style is removed, and all list items are absolute positioned
#navlist li, #navlist a {height:44px;display:block;} – the height of all the images are 44px
Now start to position and style for each specific part:

#home {left:0px;width:46px;} – Positioned all the way to the left, and the width of the image is 46px
#home {background:url(img_navsprites.gif) 0 0;} – Defines the background image and its position (left 0px, top 0px)
#prev {left:63px;width:43px;} – Positioned 63px to the right (#home width 46px + some extra space between items), and the width is 43px.
#prev {background:url(‘img_navsprites.gif’) -47px 0;} – Defines the background image 47px to the right (#home width 46px + 1px line divider)
#next {left:129px;width:43px;}- Positioned 129px to the right (start of #prev is 63px + #prev width 43px + extra space), and the width is 43px.
#next {background:url(‘img_navsprites.gif’) -91px 0;} – Defines the background image 91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )
Image Sprites – Hover Effect
Now we want to add a hover effect to our navigation list.

Tip: The :hover selector can be used on all elements, not only on links.

Our new image (“img_navsprites_hover.gif”) contains three navigation images and three images to use for hover effects:

Because this is one single image, and not six separate files, there will be no loading delay when a user hovers over the image.

We only add three lines of code to add the hover effect:

Example
#home a:hover {
    background: url(‘img_navsprites_hover.gif’) 0 -45px;
}

#prev a:hover {
    background: url(‘img_navsprites_hover.gif’) -47px -45px;
}

#next a:hover {
    background: url(‘img_navsprites_hover.gif’) -91px -45px;
}
»
Example explained:

#home a:hover {background: transparent url(‘img_navsprites_hover.gif’) 0 -45px;} – For all three hover images we specify the same background position, only 45px further down

❮ Previous Next ❯

Toggle navigation
TUTORIAL HOME
CSS Attribute  Selectors
❮ Previous Next ❯
Style HTML Elements With Specific Attributes
It is possible to style HTML elements that have specific attributes or attribute values.

CSS [attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.

The following example selects all elements with a target attribute:

Example
a[target] {
    background-color: yellow;
}
»
CSS [attribute=”value”] Selector
The [attribute=”value”] selector is used to select elements with a specified attribute and value.

The following example selects all elements with a target=”_blank” attribute:

Example
a[target=”_blank”] {
    background-color: yellow;
}
»
CSS [attribute~=”value”] Selector
The [attribute~=”value”] selector is used to select elements with an attribute value containing a specified word.

The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is “flower”:

Example
[title~=”flower”] {
    border: 5px solid yellow;
}
»
The example above will match elements with title=”flower”, title=”summer flower”, and title=”flower new”, but not title=”my-flower” or title=”flowers”.

CSS [attribute|=”value”] Selector
The [attribute|=”value”] selector is used to select elements with the specified attribute starting with the specified value.

The following example selects all elements with a class attribute value that begins with “top”:

Note: The value has to be a whole word, either alone, like class=”top”, or followed by a hyphen( – ), like class=”top-text”!

Example
[class|=”top”] {
    background: yellow;
}
»
CSS [attribute^=”value”] Selector
The [attribute^=”value”] selector is used to select elements whose attribute value begins with a specified value.

The following example selects all elements with a class attribute value that begins with “top”:

Note: The value does not have to be a whole word!

Example
[class^=”top”] {
    background: yellow;
}
»
CSS [attribute$=”value”] Selector
The [attribute$=”value”] selector is used to select elements whose attribute value ends with a specified value.

The following example selects all elements with a class attribute value that ends with “test”:

Note: The value does not have to be a whole word! 

Example
[class$=”test”] {
    background: yellow;
}
»
CSS [attribute*=”value”] Selector
The [attribute*=”value”] selector is used to select elements whose attribute value contains a specified value.

The following example selects all elements with a class attribute value that contains “te”:

Note: The value does not have to be a whole word! 

Example
[class*=”te”] {
    background: yellow;
}
»
Styling Forms
The attribute selectors can be useful for styling forms without class or ID:

Example
input[type=”text”] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type=”button”] {
    width: 120px;
    margin-left: 35px;
    display: block;
}
»
Tip: Visit our CSS Forms Tutorial for more examples on how to style forms with CSS.

Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »  Exercise 6 »

More Examples of CSS Selectors
Use our CSS Selector Tester to demonstrate the different selectors.

For a complete reference of all the CSS selectors, please go to our CSS Selectors Reference.

❮ Previous Next ❯

Toggle navigation
TUTORIAL HOME
CSS Forms
❮ Previous Next ❯
The look of an HTML form can be greatly improved with CSS:

First Name
Your name..
Last Name
Your last name..
Country »
Styling Input Fields
Use the width property to determine the width of the input field:

First Name
Example
input {
    width: 100%;
}
»
The example above applies to all elements. If you only want to style a specific input type, you can use attribute selectors:

input[type=text] – will only select text fields
input[type=password] – will only select password fields
input[type=number] – will only select number fields
etc..
Padded Inputs
Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add some margin, to add more space outside of them:

First Name
Last Name
Example
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
»
Note that we have set the box-sizing property to border-box. This makes sure that the padding and eventually borders are included in the total width and height of the elements.
Read more about the box-sizing property in our CSS3 Box Sizing chapter.

Bordered Inputs
Use the border property to change the border size and color, and use the border-radius property to add rounded corners:

First Name
Example
input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
}
»
If you only want a bottom border, use the border-bottom property:

First Name
Example
input[type=text] {
    border: none;
    border-bottom: 2px solid red;
}
»
Colored Inputs
Use the background-color property to add a background color to the input, and the color property to change the text color:


John
Example
input[type=text] {
    background-color: #3CBC8D;
    color: white;
}
»
Focused Inputs
By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.

Use the :focus selector to do something with the input field when it gets focus:


Example
input[type=text]:focus {
    background-color: lightblue;
}
»

Example
input[type=text]:focus {
    border: 3px solid #555;
}
»
Input with icon/image
If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we add a large left padding to reserve the space of the icon:


Search..
Example
input[type=text] {
    background-color: white;
    background-image: url(‘searchicon.png’);
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
}
»
Animated Search Input
In this example we use the CSS3 transition property to animate the width of the search input when it gets focus. You will learn more about the transition property later, in our CSS3 Transitions chapter.


Search..
Example
input[type=text] {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
»
Styling Textareas
Tip: Use the resize property to prevent textareas from being resized (disable the “grabber” in the bottom right corner):


  Some text… 
Example
textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}
»
Styling Select Menus

Example
select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}
»
Styling Input Buttons
Button Button
Example
input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

/* Tip: use width: 100% for full-width buttons */
»
For more information about how to style buttons with CSS, read our CSS Buttons Tutorial.

❮ Previous Next ❯

TUTORIAL HOME
CSS Counters
❮ Previous Next ❯
Pizza
Hamburger
Hotdogs
CSS counters are “variables” maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document.

Automatic Numbering With Counters
CSS counters are like “variables”. The variable values can be incremented by CSS rules (which will track how many times they are used).

To work with CSS counters we will use the following properties:

counter-reset – Creates or resets a counter
counter-increment – Increments a counter value
content – Inserts generated content
counter() or counters() function – Adds the value of a counter to an element
To use a CSS counter, it must first be created with counter-reset.

The following example creates a counter for the page (in the body selector), then increments the counter value for each

element and adds “Section :” to the beginning of each

element:

Example
body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: “Section ” counter(section) “: “;
}
»
Nesting Counters
The following example creates one counter for the page (section) and one counter for each

element (subsection). The “section” counter will be counted for each

element with “Section .”, and the “subsection” counter will be counted for each

element with “.”:

Example
body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: “Section ” counter(section) “. “;
}

h2::before {
    counter-increment: subsection;
    content: counter(section) “.” counter(subsection) ” “;
}
»
A counter can also be useful to make outlined lists because a new instance of a counter is automatically created in child elements. Here we use the counters() function to insert a string between different levels of nested counters:

Example
ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section,”.”) ” “;
}
»
CSS Counter Properties
Property Description
content Used with the ::before and ::after pseudo-elements, to insert generated content
counter-increment Increments one or more counter values
counter-reset Creates or resets one or more counters

❮ Previous Next ❯

Toggle navigation
TUTORIAL HOME
CSS3 Introduction
❮ Previous Next ❯

CSS3 is the latest standard for CSS.

CSS3 is completely backwards-compatible with earlier versions of CSS.

This section teaches you about the new features in CSS3!

CSS3 Modules
CSS3 has been split into “modules”. It contains the “old CSS specification” (which has been split into smaller pieces). In addition, new modules are added.

Some of the most important CSS3 modules are:

Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
Most of the new CSS3 properties are implemented in modern browsers.

❮ Previous Next ❯

CSS3 Rounded Corners
❮ Previous Next ❯
CSS3 Rounded Corners
With the CSS3 border-radius property, you can give any element “rounded corners”.

Browser Support
The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
border-radius 5.0
4.0 -webkit- 9.0 4.0
3.0 -moz- 5.0
3.1 -webkit- 10.5
CSS3 border-radius Property
With CSS3, you can give any element “rounded corners”, by using the border-radius property.

Here are three examples:

1. Rounded corners for an element with a specified background color:

Rounded corners!

2. Rounded corners for an element with a border:

Rounded corners!

3. Rounded corners for an element with a background image:

Rounded corners!

Here is the code:

Example
#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}
»
Tip: The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

CSS3 border-radius – Specify Each Corner
If you specify only one value for the border-radius property, this radius will be applied to all 4 corners.

However, you can specify each corner separately if you wish. Here are the rules:

Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner
Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right
Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner
One value: all four corners are rounded equally
Here are three examples:

1. Four values – border-radius: 15px 50px 30px 5px:

2. Three values – border-radius: 15px 50px 30px:

3. Two values – border-radius: 15px 50px:

Here is the code:

Example
#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
»
You could also create elliptical corners:

Example
#rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
»
Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »

CSS3 Rounded Corners Properties
Property Description
border-radius A shorthand property for setting all the four border-*-*-radius properties
border-top-left-radius Defines the shape of the border of the top-left corner
border-top-right-radius Defines the shape of the border of the top-right corner
border-bottom-right-radius Defines the shape of the border of the bottom-right corner
border-bottom-left-radius Defines the shape of the border of the bottom-left corner

❮ Previous Next ❯

CSS3 Border Images
❮ Previous Next ❯
CSS3 Border Images
With the CSS3 border-image property, you can set an image to be used as the border around an element.

Browser Support
The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
border-image 16.0
4.0 -webkit- 11.0 15.0
3.5 -moz- 6.0
3.1 -webkit- 15.0
11.0 -o-
CSS3 border-image Property
The CSS3 border-image property allows you to specify an image to be used instead of the normal border around an element.

The property has three parts:

The image to use as the border
Where to slice the image
Define whether the middle sections should be repeated or stretched
We will use the following image (called “border.png”):

The border-image property takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify.

Note: For border-image to work, the element also needs the border property set!

Here, the middle sections of the image are repeated to create the border:

An image as a border!

Here is the code:

Example
#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}
»
Here, the middle sections of the image are stretched to create the border:

An image as a border!

Here is the code:

Example
#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(border.png) 30 stretch;
}
»
Tip: The border-image property is actually a shorthand property for the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.

CSS3 border-image – Different Slice Values
Different slice values completely changes the look of the border:

Example 1:

border-image: url(border.png) 50 round;

Example 2:

border-image: url(border.png) 20% round;

Example 3:

border-image: url(border.png) 30% round;

Here is the code:

Example
#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}
»
Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »

CSS3 Border Properties
Property Description
border-image A shorthand property for setting all the border-image-* properties
border-image-source Specifies the path to the image to be used as a border
border-image-slice Specifies how to slice the border image
border-image-width Specifies the widths of the border image
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched

❮ Previous Next ❯

CSS3 Backgrounds
❮ Previous Next ❯
CSS3 Backgrounds
CSS3 contains a few new background properties, which allow greater control of the background element.

In this chapter you will learn how to add multiple background images to one element.

You will also learn about the following new CSS3 properties:

background-size
background-origin
background-clip
Browser Support
The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
background-image
(with multiple backgrounds) 4.0 9.0 3.6 3.1 11.5
background-size 4.0
1.0 -webkit- 9.0 4.0
3.6 -moz- 4.1
3.0 -webkit- 10.5
10.0 -o-
background-origin 1.0 9.0 4.0 3.0 10.5
background-clip 4.0 9.0 4.0 3.0 10.5
CSS3 Multiple Backgrounds
CSS3 allows you to add multiple background images for an element, through the background-image property.

The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

The following example has two background images, the first image is a flower (aligned to the bottom and right) and the second image is a paper background (aligned to the top-left corner):

Example
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}
»
Multiple background images can be specified using either the individual background properties (as above) or the background shorthand property.

The following example uses the background shorthand property (same result as example above):

Example
#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
»
CSS3 Background Size
The CSS3 background-size property allows you to specify the size of background images.

Before CSS3, the size of a background image was the actual size of the image. CSS3 allows us to re-use background images in different contexts.

The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover.

The following example resizes a background image to much smaller than the original image (using pixels):

Original background image:

Lorem Ipsum Dolor
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.

Resized background image:

Lorem Ipsum Dolor
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.

Here is the code:

Example
#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}
»
The two other possible values for background-size are contain and cover.

The contain keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area). As such, depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.

The cover keyword scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area). As such, some parts of the background image may not be visible in the background positioning area.

The following example illustrates the use of contain and cover:

Example
#div1 {
    background: url(img_flower.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url(img_flower.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
»
Define Sizes of Multiple Background Images
The background-size property also accepts multiple values for background size (using a comma-separated list), when working with multiple backgrounds.

The following example has three background images specified, with different background-size value for each image:

Example
#example1 {
    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}
»
Full Size Background Image
Now we want to have a background image on a website that covers the entire browser window at all times.

The requirements are as follows:

Fill the entire page with the image (no white space)
Scale image as needed
Center image on page
Do not cause scrollbars
The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

Example
html {
    background: url(img_flower.jpg) no-repeat center fixed;
    background-size: cover;
}
»
CSS3 background-origin Property
The CSS3 background-origin property specifies where the background image is positioned.

The property takes three different values:

border-box – the background image starts from the upper left corner of the border
padding-box – (default) the background image starts from the upper left corner of the padding edge
content-box – the background image starts from the upper left corner of the content
The following example illustrates the background-origin property:

Example
#example1 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: content-box;
}
»
CSS3 background-clip Property
The CSS3 background-clip property specifies the painting area of the background.

The property takes three different values:

border-box – (default) the background is painted to the outside edge of the border
padding-box – the background is painted to the outside edge of the padding
content-box – the background is painted within the content box
The following example illustrates the background-clip property:

Example
#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}
»
Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »

CSS3 Background Properties
Property Description
background A shorthand property for setting all the background properties in one declaration
background-clip Specifies the painting area of the background
background-image Specifies one or more background images for an element
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)

❮ Previous Next ❯

Toggle navigation
TUTORIAL HOME
CSS3 Colors
❮ Previous Next ❯
CSS3 Colors
CSS supports color names, hexadecimal and RGB colors.

In addition, CSS3 also introduces:

RGBA colors
HSL colors
HSLA colors
opacity
Browser Support
The numbers in the table specify the first browser version that fully supports CSS3 color values/property.

Property
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
opacity 4.0 9.0 2.0 3.1 10.1
RGBA Colors
RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);
The following example defines different RGBA colors:

Example
#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
»
HSL Colors
HSL stands for Hue, Saturation and Lightness.

An HSL color value is specified with: hsl(hue, saturation, lightness).

Hue is a degree on the color wheel (from 0 to 360):
0 (or 360) is red
120 is green
240 is blue
Saturation is a percentage value: 100% is the full color.
Lightness is also a percentage; 0% is dark (black) and 100% is white.
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);
The following example defines different HSL colors:

Example
#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
»
HSLA Colors
HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity for a color.

An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);
The following example defines different HSLA colors:

Example
#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
»
Opacity
The CSS3 opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent).

The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;
Notice that the text above will also be transparent/opaque!

The following example shows different elements with opacity:

Example
#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
»
Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »

❮ Previous Next ❯