ISTA 230

ISTA 230 - Introduction to Web Design

Background Images

CSS

CSS

Background Images

Page with only background colors

CSS

CSS

Background Images

Page with background images

CSS

CSS

Purpose of Background Images

CSS

CSS

Background Images

Plain navigation

CSS

CSS

Background Images - Color Options

Adding color options

CSS

CSS

Purpose of Background Images

CSS

CSS

Background Images - Shapes

Plain navigation

CSS

CSS

Background Images - Shapes

Adding shape

CSS

CSS

Background Images - Shapes

Adding shape

CSS

CSS

Purpose of Background Images

CSS

CSS

Background Images - Depth

Plain navigation

CSS

CSS

Background Images - Depth

Adding shadows

CSS

CSS

Background Images - Depth

Adding light

CSS

CSS

Background Images - Uses

Background images can be used for a number of things:

For some really powerful examples of how background images can be used to transform pages, visit http://csszengarden.com.

CSS

CSS

Background Images

Example of background images

CSS

CSS

Background Images

Example of background images

CSS

CSS

Background Images

Example of background images

CSS

CSS

Background Images

Example of background images

CSS

CSS

Background Images

Example of background images

CSS

CSS

Box Model

Margin
Border
Padding
This is my content.

CSS

CSS

Box Model

Margin
Border
Padding
This is my content.

Just as an element's background color applies to its padding area and border area, background images will also show through an element's padding and any semi-transparent borders (e.g., dashed, dotted, etc.).

CSS

CSS

Box Model

Margin
Border
Padding
This is my content.

CSS

CSS

Background Images

body
{
   background-image: url('URLtoImageFile');
}

Relative URLs are created based on the image location in relation to the CSS file.

The 'background-image' property takes It is worth noting that relative URLs are created based on the image location in relation to the CSS file.

CSS

CSS

Background Images

The 'background-image' property takes a URL value using the following format:

body
{
   background-image: url('URLtoImageFile');
}

It is worth noting that relative URLs are created based on the image location in relation to the CSS file. For example, the CSS below...

body
{
   background-image: url('../images/background.png');
}

Would work with a folder structure that looks like the following:

Folder structure

CSS

CSS

Background Images

Background Tile
body
{
   background-image: url('../images/background.png');

}

   

CSS

CSS

Background Images

Background Tile
body
{
   background-image: url('../images/background.png');

}

   

CSS

CSS

Background Images - Tiles

Background Tile - Cats
body
{
   background-image: url('../images/cats.png');

}

      

By default, background images will repeat vertically and horizontally. When using tiles, it is important that you pick background images that repeat well!

CSS

CSS

Background Images - Tiles

Background Tile - Dots
      

CSS

CSS

Background Images - Tiles

Background Tile - Stripes
      

CSS

CSS

Background Images - Tiles

Background Tile - Plaid
      

CSS

CSS

Background Images - Tiles

Background Tile - Paisley
      

CSS

CSS

Background Images - Tiles

Background Tile - Cropping
      

CSS

CSS

Background Images - Tiles

Background Tile - Cropping

CSS

CSS

Background Images - Tiles

Background Tile - Cropping
      

CSS

CSS

Background Images - Tiles

When using complex backgrounds, it is important to remember our goals from typography: legibility and readability. Placing text directly on a busy background image can create illegible text. For example, consider a background like the following image:

Background Tile - Cropping
         
This content is painful to read!

CSS

CSS

Background Images - Tiles

Background Tile - Cropping
         
This content is easier to read!

A solution for this would be to use the background image along the edges of the page but use a solid contrasting color for the background.

CSS

CSS

Background Repeat

Background Tile

As previously mentioned, background images are repeated both vertically and horizontally on the page. This is done along x- and y- axes.

body
{
   background-image: url('../images/background.png');

}
      
← x axis →


y

a
x
i
s

CSS

CSS

Background Repeat

Background Tile

Using the 'background-repeat' property, we can adjust how (or if) background images are repeated. For example, we can specify 'repeat-x' to cause the background image to repeat horizontally.

body
{
   background-image: url('../images/background.png');
   background-repeat:repeat-x;
}

   

CSS

CSS

Background Repeat

Background Tile

By specifying 'repeat-y', we can tell the browser that the background image should repeat vertically but not horizontally.

body
{
   background-image: url('../images/background.png');
   background-repeat:repeat-y;
}

   

CSS

CSS

Background Repeat

Background Tile
body
{
   background-image: url('../images/notebook.png');
   background-repeat:repeat-y;

}
      

CSS

CSS

Background Repeat

Background Tile
body
{
   background-image: url('../images/notebook.png');
   background-repeat:repeat-y;

}
         These are just a few of my notes in my
“notebook”. They're a little hard to read
because of the background image...

CSS

CSS

Background Repeat

Background Tile
body
{
   background-image: url('../images/notebook.png');
   background-repeat:repeat-y;
   padding-left: 50px;
}
         These are just a few of my notes in my
“notebook”. They're a little hard to read
because of the background image...

When using vertically repeating images, use left and right padding to position your text away from the background image to ensure good readability.

CSS

CSS

Background Images - Linear Gradients

Background Tile
      

CSS

CSS

Background Images - Linear Gradients

Background Tile
body
{
   background-image: url('../images/gradient.jpg');
   background-repeat:repeat-x;

}
      

CSS

CSS

Background Images - Linear Gradients

Background Tile
body
{
   background-image: url('../images/gradient.jpg');
   background-repeat:repeat-x;
   background-color: #000;
}
      

CSS

CSS

Background Images - Linear Gradients

Background Tile
body
{
   background-image: url('../images/gradient.png');
   background-repeat:repeat-x;
   background-color: #000;
}
      

CSS

CSS

Background Images - Linear Gradients

Background Tile
body
{
   background-image: url('../images/gradient.png');
   background-repeat:repeat-x;
   background-color: #d7f2f1;
}
      

CSS

CSS

Background Images - Non-repeating Background

Background Tile
body
{
   background-image: url('../images/background.png');

}

CSS

CSS

Background Images - Non-repeating Background

Background Tile

Lastly, by specifying 'no-repeat', we can tell the browser that an image shouldn't be repeated on the page.

body
{
   background-image: url('../images/background.png');
   background-repeat:no-repeat;
}
      

CSS

CSS

Background Images - Non-repeating Background

Background Tile
body
{
   background-image: url('../images/cats.jpg');
   background-repeat:no-repeat;
   padding-left:75px;
}
         Cats!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl.

CSS

CSS

Background Images - Non-repeating Background

body
{
   background-image: url('../images/largeCats.jpg');
   background-repeat:no-repeat;
   padding-left:75px;
}

It is worth noting that background images do not have any dimensions other than the original dimensions of the image. In other words, be careful when using larger images as they will display at their original size regardless of the size of the screen they are viewed on.

         Cats!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl.

CSS

CSS

Background Images - A caution

CSS

CSS

Background Images - A caution

In other words, use HTML for organization, structure, and meaning. Use CSS for modifying the display and design of the webpage.

CSS

CSS

Background Images - Accessibility

On occasion, I have seen instances of designers using background images in place of text. For example, consider the following code snippets:

<a class='imageLink' href='about.html'></a>
a.imageLink
{
   display: block;
   height: 50px;
   width: 200px;
   background-image: url('../images/link.jpg');
   background-repeat: no-repeat;
}
         Example of an inaccessible image link
      

While the above link might be visible to most users, any users who are relying on a screen reader or other assistive technology would not have any text associated with the link (and therefore would have no context on what the link does).

CSS

CSS

background-image Property

div { background-image: url('someFile'); }
div { background-image: none; }
/*
 * This property sets the background image
 * for an element. By default, background
 * images are placed at the top-left
 * corner of an element and repeated
 * both vertically and horizontally.
 * the capitalization of the text.
 *
 * Default Value: none
 * Inherited: No
 *
 */

CSS

CSS

background-repeat Property

div { background-repeat: repeat; }
div { background-repeat: repeat-x; }
div { background-repeat: no-repeat; }
/*
 * This property specifies if/how a background
 * image should be repeated. By default, images
 * are repeated both vertically and horizontally.
 *
 * Default Value: repeat
 * Inherited: No
 *
 */

CSS

CSS

Background Images - Where to get them...

CSS

CSS

Background Images - Radial Gradients

Background Tile
body
{
   background-image: url('../images/radialGradient.png');
   background-repeat:no-repeat;

}

CSS

CSS

Background Images - Radial Gradients

Background Tile
body
{
   background-image: url('../images/radialGradient.png');
   background-repeat:no-repeat;

}
         
Afterglow Inc.

Ideally, we'd position this in the middle...

CSS

CSS

Background Images

In addition to specifying how a background image should repeat, we can also specify the position where it should be placed (and repeat outwards from).

body
{
   background-image: url('../images/radialGradient.png');
   background-repeat:no-repeat;
   background-position: horizontalValue     verticalValue;
}

Background position can be specified in pixels, percentages, or using CSS keywords.

It is important to note that using pixels specifies the exact position of the top-left corner of the image while, when using a percentage value or CSS keyword, the position values used refer to both the position on the element as well as the position on the image. For example, consider the following CSS code:

body
{
   background-position: 100px 50px;
}

The top-left corner of the background image would be exactly 100px from the left edge of the element and 50px from the top edge of the element. Conversely, consider the following CSS code:

body
{
   background-position: 50% 100%;
}

The percentages refer to both the element AND the corresponding point on the image. In other words, the horizontal mid-point of the picture should be lined up with the horizontal midpoint of the <body>. Similarly, the bottom edge of the image should be lined up with the bottom edge of the <body>.

The CSS keywords 'left', 'right', 'center', 'top', and 'bottom' are simply alternatives to their equivalent percentages.

CSS

CSS

Background Images - Background Position

CSS

CSS

Background Images - Position - Pixels

body
{
   background-position: 100px 50px;
}
   /*
    * The top-left corner of the background image
    * should be exactly 100px from the
    * left edge of the element and 50px from the 
    * top edge of the element.
    */

CSS

CSS

Background Images - Position - Percentage

body
{
   background-position: 50% 100%;
}  
   /*
    * Percentages refer to both the element AND
    * the corresponding point on the image.
    * In the case above, the horizontal mid-point of
    * the picture should be lined up with the horizontal
    * midpoint of the <body>. Similarly, the bottom
    * edge of the image should be lined up with the bottom
    * edge of the <body>.
    */

CSS

CSS

Background Images - Radial Gradients

Background Tile
body
{
   background-image: url('../images/radialGradient.png');
   background-repeat:no-repeat;

}
         
Afterglow Inc.

CSS

CSS

Background Images - Radial Gradients

Background Tile
body
{
   background-image: url('../images/radialGradient.png');
   background-repeat:no-repeat;
   background-position: 50% 0;
}
         
Afterglow Inc.

CSS

CSS

Background Images - Position - Keyword

   background-position: center top; /* Same as 50% 0% */
   
   /*
    * The keywords 'left', 'right', 'center',
    * 'top', and 'bottom' are simply alternatives
    * to their equivalent percentages.
    */

CSS

CSS

background-position Property

div { background-position: 10px 10px; }
div { background-position: 50% 100%; }
div { background-position: right bottom; }
/*
 * This property specifies the starting position
 * for a background image. This property takes
 * a x-axis position and a y-axis position.
 * Positions can be specified in pixels, percentages,
 * or using keywords from the following list:
 * 'left', 'right', 'center', 'top', and 'bottom'
 *
 * Default Value: 0% 0%
 * Inherited: No
 *
 */

CSS

CSS

Background Images - Centered Backgrounds

Background Tile
         
My content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl.

CSS

CSS

Background Images - Centered Backgrounds

Background Tile
         
My content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl.

If your element is smaller than the size of your background image, your image will be cropped!

CSS

CSS

Background Images - Background Position

Background Tile
body
{
   background-color:#2a5184;
   background-image: url('../images/grass.png');
   background-repeat:repeat-x;
   background-position: 0 100%;
   padding-bottom:75px;

}
      

CSS

CSS

Background Images - Background Position

Background Tile
body
{
   background-color:#2a5184;
   background-image: url('../images/grass.png');
   background-repeat:repeat-x;
   background-position: 0 100%;
   padding-bottom:75px;

}
My content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl.

CSS

CSS

Background Images - Background Attachment

Background Tile
body
{
   background-color:#2a5184;
   background-image: url('../images/grass.png');
   background-repeat:repeat-x;
   background-position: 0 100%;
   padding-bottom:75px;
   background-attachment: scroll; /* Default */
}
My content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl.

CSS

CSS

Background Images - Background Attachment

Background Tile

We can also change the way background images are attached to the page. By default, background images scroll along with the rest of the content on the page. We can change this by specifying 'fixed' for the background-attachment property.

body
{
   background-color:#2a5184;
   background-image: url('../images/grass.png');
   background-repeat:repeat-x;
   background-position: 0 100%;
   padding-bottom:75px;
   background-attachment: fixed;
}

When using fixed backgrounds, background-position is relative to the viewport, not the containing element. Because of this, it's best to only use fixed backgrounds on the <body> element (if at all).

My content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien orci, sollicitudin sit amet vulputate nec, adipiscing sed elit. Nunc et nisl felis, eget venenatis velit. Nam mauris tortor, dictum quis sollicitudin ut, placerat sed ante. Donec mattis sem et libero placerat lacinia consequat diam cursus. Ut ornare ultrices tincidunt. Aenean quis urna ac mauris cursus rhoncus vitae at est. Maecenas faucibus pharetra mi vitae rhoncus. Cras vel urna eu nisl luctus blandit vel eu lectus. Aliquam tortor eros, pharetra sed tincidunt commodo, posuere a mauris. Quisque sed purus id mi dapibus tempus. Morbi varius fringilla ante, vel laoreet nisl euismod pellentesque.

Cras eget est a lorem dictum euismod. Aliquam sit amet ipsum accumsan nisl lobortis tempus. Nulla fermentum viverra fermentum. In in mi velit, at tincidunt magna. Proin malesuada nisi eu massa varius eget sodales sem semper. Curabitur ac magna et erat hendrerit molestie et in lectus. Duis accumsan dignissim lectus non convallis. Suspendisse potenti. Etiam suscipit eros quis velit rutrum ullamcorper. Suspendisse vel nisl magna, vel porttitor urna. Nam at sem arcu. Vestibulum leo lorem, pharetra sit amet volutpat nec, pretium tincidunt dui. Nunc varius, elit vitae dignissim dignissim, risus elit imperdiet sapien, mollis pretium ligula eros non nisl.

CSS

CSS

Background Images - Background Attachment - Fixed

When using fixed backgrounds, background-position is relative to the viewport, not the containing element.

CSS

CSS

background-attachment Property

div { background-attachment: scroll; }
div { background-attachment: fixed; }
/*
 * This property specifies what happens to the background
 * image when the user scrolls up or down the page.
 *
 * Default Value: scroll
 * Inherited: No
 *
 */

CSS

CSS

Background - Shorthand

If you don't like typing so much, you can use the shorthand notation for background properties.

body
{
    background: color image repeat attachment x-axis-position y-axis-position;
}

For example:

body
{
    background: #358 url('../images/grass.png') repeat-x scroll 0% 100%;
}

The above would result in the body having a blue background color and the file 'grass.png' as its background image. The background image would scroll along with the page content and would be positioned starting on the bottom left corner of the page and would repeat across the x-axis.

CSS

CSS

Background - Shorthand

body
{
    background: #358 url('../images/grass.png') repeat-x scroll 0% 100%;
}

CSS

CSS

Background Images - Advanced Uses

  • Hover Effects

CSS

CSS

Background Images - Hover Effects

Gradients

CSS

CSS

Background Images - Hover Effects

One advanced use of background images is to create more interesting hover effects. We can change background images when the user hovers their mouse over a given element.

a
{
   background-color: #036;
   text-decoration: none;
   background-image: url("../images/gradient1.png");
   color:white;
}

a:hover
{
   text-decoration: underline;
   background-image: url("../images/gradient2.png");
}
My Link

While this is technically possible, it is worth noting that this can have a bit of a 'flicker' effect when using larger background images. This is because the browser doesn't actually download a copy of the second image until it is needed (i.e., when the user first hovers their cursor over the link).

CSS

CSS

Background Images - Advanced Uses

  • Hover Effects
  • Informational Icons

CSS

CSS

Background Images - Informational Icons

Warning Icon

CSS

CSS

Background Images - Informational Icons

Background images can also be used to give additional visual indicators to elements such as error or warning messages.

.warningMessage
{
   background-color: #FFFF8C;
   border: 1px solid #FFCC00;
   color: #666666;
   font-weight: bold;
   padding-left:80px;
   background-image: url("../images/warningIcon.png");
   background-repeat: no-repeat;
   background-position:0% 50%;

}
      
Warning: There are bears in the building!

When using this approach, it is important to consider what your element will look like when there's not very much text in the element (i.e., doesn't have a very large height value). Conversely, you should also consider what it will look like when there is a lot of text in the element (i.e., it has a very large height value).

CSS

CSS

Background Images - Informational Icons

.warningMessage
{
   background-color: #FFFF8C;
   border: 1px solid #FFCC00;
   color: #666666;
   font-weight: bold;
   padding-left:80px;
   background-image: url("../images/warningIcon.png");
   background-repeat: no-repeat;
   background-position:0% 50%;
   min-height:60px;
}
      
Warning: There are bears in the building!

CSS

CSS

Background Images - Informational Icons

.warningMessage
{
   background-color: #FFFF8C;
   border: 1px solid #FFCC00;
   color: #666666;
   font-weight: bold;
   padding-left:80px;
   background-image: url("../images/warningIcon.png");
   background-repeat: no-repeat;
   background-position:0% 50%;
   min-height:60px;
}
      
Warning: There are bears in the building! In case you're not sure what a bear is, here's some information from Wikipedia:

Bears are mammals of the family Ursidae. Bears are classified as caniforms, or doglike carnivorans, with the pinnipeds being their closest living relatives. Although only eight species of bears are extant, they are widespread, appearing in a wide variety of habitats throughout the Northern Hemisphere and partially in the Southern Hemisphere. Bears are found on the continents of North America, Central America, South America, Europe, and Asia.

CSS

CSS

Background Images - Informational Icons

.warningMessage
{
   background-color: #FFFF8C;
   border: 1px solid #FFCC00;
   color: #666666;
   font-weight: bold;
   padding-left:80px;
   background-image: url("../images/warningIcon.png");
   background-repeat: no-repeat;
   background-position:10px 5px;
   min-height:60px;
}
      
Warning: There are bears in the building! In case you're not sure what a bear is, here's some information from Wikipedia:

Bears are mammals of the family Ursidae. Bears are classified as caniforms, or doglike carnivorans, with the pinnipeds being their closest living relatives. Although only eight species of bears are extant, they are widespread, appearing in a wide variety of habitats throughout the Northern Hemisphere and partially in the Southern Hemisphere. Bears are found on the continents of North America, Central America, South America, Europe, and Asia.

CSS

CSS

Background Images - Advanced Uses

  • Hover Effects
  • Informational Icons
  • Sprites

CSS

CSS

Background Images - Sprites

a
{
   display:block;
   margin:5px;
   padding:5px;
   color: #000;
}

CSS

CSS

Background Images - Sprites

Often times, background images are used to provide small visual indicators and/or decorations. For example, links to files are often accompanied by a small icon indicating what type of file it is.

a
{
   height:25px;
   padding-left: 30px;
   background-repeat: no-repeat;
   background-position: 0px 0px;
}
a.pdf { background-image: url('../images/pdfIcon.png'); }
a.doc { background-image: url('../images/docIcon.png'); }
a.xls { background-image: url('../images/xlsIcon.png'); }
a.jpg { background-image: url('../images/jpgIcon.png'); }

Pros? Cons?

The problem with the above approach is that requires the browser to download multiple images (4 HTTP requests for a total content size of 14.0 kB).

CSS

CSS

Background Images - Sprites

  • Multiple images
  • Each image is 25 px tall
  • 4 HTTP requests
  • Content Size: 14.0 kB

CSS

CSS

Background Images - Sprites

Instead of using multiple images, we'll use an approach that requires only a single image for our file icons. This will reduce both the number of HTTP calls as well as the total file size.

Sprites
  • Multiple images
  • Each image is 25 px tall
  • 4 HTTP requests
  • Content Size: 14.0 kB
  • Single image
  • Total image height is 100px
  • 1 HTTP request
  • Content Size: 11.0 kB

CSS

CSS

Background Images - Sprites

a
{
   height:25px;
   padding-left: 30px;
   background-repeat: no-repeat;
   background-position: 0px 0px;

}
a.pdf { background-image: url('../images/pdfIcon.png'); }
a.doc { background-image: url('../images/docIcon.png'); }
a.xls { background-image: url('../images/xlsIcon.png'); }
a.jpg { background-image: url('../images/jpgIcon.png'); }

CSS

CSS

Background Images - Sprites

a
{
   height:25px;
   padding-left: 30px;
   background-repeat: no-repeat;
   background-position: 0px 0px;
   background-image: url('../images/icons.png');
}
a.pdf {                                                 }
a.doc {                                                 }
a.xls {                                                 }
a.jpg {                                                 }

CSS

CSS

Background Images - Sprites

a
{
   height:25px;
   padding-left: 30px;
   background-repeat: no-repeat;
   background-position: 0px 0px;
   background-image: url('../images/icons.png');
}
a.pdf { background-position: 0px   0px;                 }
a.doc { background-position: 0px -25px;                 }
a.xls {                                                 }
a.jpg {                                                 }

CSS

CSS

Background Images - Sprites

a { background-position: 0px   0px;}

CSS

CSS

Background Images - Sprites

a { background-position: 0px px;}
Sprites

CSS

CSS

Background Images - Sprites

Instead of specifying a different background image for each file type, we'll use a shared background image. We can then use a negative value for the background position to move the visible region of the background image around. It is worth noting that this technique works because of the fixed size of the element (30px × 25px).

a
{
   height:25px;
   padding-left: 30px;
   background-repeat: no-repeat;
   background-position: 0px 0px;
   background-image: url('../images/icons.png');
}
a.pdf { background-position: 0px   0px;                 }
a.doc { background-position: 0px -25px;                 }
a.xls { background-position: 0px -50px;                 }
a.jpg { background-position: 0px -75px;                 }

CSS

CSS

Background Images - Sprites

CSS

CSS

Background Images - Advanced Uses

  • Hover Effects
  • Informational Icons
  • Sprites
  • Image Replacement

CSS

CSS

Background Images - Image Replacement

Often times, we would like to display text in a non-standard font to help distinguish our website from others. Unfortunately, the limitations of web typography make this a bit more challenging.

Using just HTML, we can easily create text that looks like the following:

Our Product

However, we can use background images and a technique called 'image replacement' to make it look like this:

Logo

CSS

CSS

Background Images - Image Replacement

<h1 id="logo">Our Product</h1>
      
Our Product

CSS

CSS

Background Images - Image Replacement

h1#logo
{
   background:url('../images/logo.png') no-repeat 50% 0;
   height:150px;
   width:300px;

}
         
Our Product

CSS

CSS

Background Images - Image Replacement

Using our background image properties, we would specify an image of our logo as the background image, specify that it should not repeat, and that it should be centered horizontally in our <h1> element.

Next, we want to specify the exact dimensions of our heading element so that it matches the dimensions of our image.

Lastly, we want to hide the text of our heading element. We can do this using a negative value for our text-indent property. This will move the text off of the screen on traditional browsers while leaving it in place for screen readers and other assistive technology.

h1#logo
{
   background:url('../images/logo.png') no-repeat 50% 0;
   height:150px;
   width:300px;
   text-indent: -9999px;
}
         
      

CSS

CSS

Background Text Images - Where to get them...

CSS

CSS

Background Images - Advanced Uses

  • Hover Effects
  • Informational Icons
  • Sprites
  • Image Replacement
  • Sliding Doors

CSS

CSS

Background Images - Sliding Doors

         The Goal!
      

CSS

CSS

Background Images - Sliding Doors

Consider the following challenge: Create a navigation element that has a solid border and rounded corners on the top left and top right.

The first approach might be to try and use a single background image to solve the problem.

<a href='#' class="tab">Label</a>
a.tab
{
   background:url('../images/tab.png') no-repeat 0% 100%;
   height:50px;
   padding:0 10px;
}
         Label
      

While this would work on smaller elements, links with more text would have an overflow issue.

         Big Labels Are Problematic
      

CSS

CSS

Background Images - Sliding Doors

CSS

CSS

Background Images - Sliding Doors

<a href="#" class="tab">      Label       </a>

CSS

CSS

Background Images - Sliding Doors

<a href="#" class="tab"><span>Label</span></a>

CSS

CSS

Background Images - Sliding Doors

<a href="#" class="tab"><span>Label</span></a>
a.tab span
{
   display:block;
   height:25px;
   background: url('../images/right.png') no-repeat 100% 100%;
   padding-right:10px;
}
   Label

CSS

CSS

Background Images - Sliding Doors

<a href="#" class="tab"><span>Label</span></a>
a.tab
{
   display:block;
   background: url('../images/left.png') no-repeat 0% 100%;

}
   Label

CSS

CSS

Background Images - Sliding Doors

<a href="#" class="tab"><span>Label</span></a>
a.tab
{
   display:block;
   background: url('../images/left.png') no-repeat 0% 100%;
   padding-left:10px;
}
   Label

CSS

CSS

Background Images - Sliding Doors

<a href="#" class="tab"><span>Label</span></a>
a.tab span
{
   display:block;
   height:25px;
   background: url('../images/right.png') no-repeat 100% 100%;
   padding-right:10px;

}
   Label

CSS

CSS

Background Images - Sliding Doors

<a href="#" class="tab"><span>Label</span></a>
a.tab span
{
   display:block;
   height:25px;
   background: url('../images/right.png') no-repeat 100% 100%;
   padding-right:10px;
   float:left;
}
   Label


CSS

CSS

Background Images - Sliding Doors

<a href="#" class="tab"><span>Label</span></a>
a.tab
{
   display:block;
   background: url('../images/left.png') no-repeat 0% 100%;
   padding-left:10px;

}
   Label


CSS

CSS

Background Images - Sliding Doors

<a href="#" class="tab"><span>Label</span></a>
a.tab
{
   display:block;
   background: url('../images/left.png') no-repeat 0% 100%;
   padding-left:10px;
   overflow:auto;
}
   Label

CSS

CSS

Background Images - Sliding Doors

<a href="#" class="tab"><span>My Label Can Be Much, Much Bigger Now</span></a>
a.tab
{
   display:block;
   background: url('../images/left.png') no-repeat 0% 100%;
   padding-left:10px;
   overflow:auto;
}
   My Label Can Be Much, Much Bigger Now

CSS

CSS

Background Images - Sliding Doors

<a href="#" class="tab"><span>Me</span></a>
a.tab
{
   display:block;
   background: url('../images/left.png') no-repeat 0% 100%;
   padding-left:10px;
   overflow:auto;
}
   Me

CSS

CSS

Background Images - Sliding Doors

The trick here is to break our background image into two pieces. The first image will serve as the background element for the parent element. The second will serve as a right-aligned background element for the child element.

<a href="#" class="tab"><span>Label</span></a>
a.tab
{
   display:block;
   background: url('../images/left.png') no-repeat 0% 100%;
   padding-left:10px;
   overflow:auto;
}

a.tab span
{
   display:block;
   height:25px;
   background: url('../images/right.png') no-repeat 100% 100%;
   padding-right:10px;
   float:left;
}
   Label

As the text of the link grows, the <span> grows as well, with it's background image 'sliding' out to cover the entire element.

CSS

CSS

Background Images - Advanced Uses

  • Hover Effects
  • Informational Icons
  • Sprites
  • Image Replacement
  • Sliding Doors
  • Rounded Corners

CSS

CSS

Background Images - Rounded Corners

Using eight images and a similar approach to that described on the previous slide, you can create an element that has 'rounded corners'.

Box with rounded corners
Box with rounded corners

CSS

CSS

Background Images - Examples

Example of background images

CSS

CSS

Background Images - Examples

Example of background images

CSS

CSS

Background Images - Examples

Example of background images

CSS

CSS

Background Images - Examples

Example of background images

CSS

CSS

Background Images - Examples

Example of background images