Tiled background image : background image « CSS « HTML / CSS

Tiled background image

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>background-position</title>
<style type='text/css'>
body {
    font: 12px sans-serif;
}
p {
    background: yellow;
    padding: 3px;
    clear: left;
}
div {
    height: 81px;
    width: 81px;
    margin: 20px;
    background-image: url('http://java2s.com/style/logo.png');
    background-repeat: no-repeat;
    float: left;
    border: 1px solid rgb(128, 128, 128);
}
div#tiled {
    background-repeat: repeat;
    background-position: center center;
}
</style>


    </head>
    <body>
        <div id='tiled'>
        </div>
    </body>
</html>

Related examples in the same category

1.	'background-image' Example
2.	background-image: url('backgroundImage.jpg');
3.	background-image property
4.	background-image:url(http://java2s.com/style/logo.png); background-color:#cccccc;
5.	background-image: url(http://java2s.com/style/logo.png);background-repeat: repeat-x; background-color: #ffffff;
6.	background image: url
7.	Page like background image for whole page
8.	Background-image: url(plane.gif), url(mail.gif), url(printer.gif), url(gift.gif); Background-position: center, top center, 40% 24px, 60% 24px;
9.	The background-image property uses the url() syntax to specify a background-image.
10.	background-image with default repeat properties
11.	Use background-image:none to show no background image
12.	Set background image for first line text in paragraph
13.	Only part of a large background image is visible because the element's height is determined by the length of its contents.
14.	Set style for strong to normal font weight and background color to yellow
15.	Set more than one image for background
16.	Add background image to LI
17.	Adding background images and indentation
18.	background-image and background-color