http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FCSS_Attributes_and_Javascript_Style_Properties%2Fbackground_position
HTML/CSS/CSS Attributes and Javascript Style Properties/background position - История изменений
2026-04-04T09:18:20Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/background_position&diff=4734&oldid=prev
в 09:20, 26 мая 2010
2010-05-26T09:20:59Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:20, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/background_position&diff=4735&oldid=prev
Admin: 1 версия
2010-05-26T08:15:58Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==background-position: 0 0==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<?xml version="1.0" encoding="iso-8859-1"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>CSS Example</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
background-image: url(http://www.wbex.ru/style/logo.png);<br />
background-repeat: no-repeat;<br />
background-position: 0 0;<br />
background-color: #ffffff;<br />
font-family: arial;<br />
}<br />
div {<br />
background-image: url(http://www.wbex.ru/style/logo.png);<br />
background-repeat: no-repeat;<br />
background-position: center;<br />
width: 500px;<br />
height: 100px;<br />
border: solid 1px black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>background-position</h2><br />
<div></div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: 0% 50%==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
html, body {<br />
height: 1000px;<br />
}<br />
body {<br />
background-image: url("backgroundImage.jpg");<br />
background-repeat: no-repeat;<br />
background-position: 0% 50%;<br />
}<br />
</style><br />
</head><br />
<body><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position:==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#percentage {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 10px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: 10% 10%; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="percentage">10%, 10%</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: 10px 10px==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#length {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 10px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: 10px 10px; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="length">10px, 10px</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: 10px 50%==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#length-percentage {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 4px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: 10px 50%; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="length-percentage">10px, 50%</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: 10px top==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#length-keyword {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 4px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: 10px top; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="length-keyword">10px, top</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position:x==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#percentage-length {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 4px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: 50% 10px; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="percentage-length">50%, 10px</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position:==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>CSS Example</title><br />
<style rel="stylesheet" type="text/css"><br />
/* style sheet demonstrating the background-image property */<br />
body {<br />
background-image: url(http://www.wbex.ru/style/logo.png);<br />
background-position: 50% 20%;<br />
background-repeat: no-repeat;<br />
background-color: #f2f2f2;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
<p>This example illustrates the <b>background-image</b> property.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: 50% center==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#percentage-keyword {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 4px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: 50% center;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="percentage-keyword">50%, center</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: bottom center==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#bottom-center {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 10px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: bottom center;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="bottom-center">bottom, center</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: bottom left==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#bottom-left {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 10px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: bottom left; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="bottom-left">bottom, left</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: center==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Background position </title><br />
<style><br />
body {background-color: cyan;<br />
background-image: url(http://www.wbex.ru/style/logo.png);<br />
background-repeat: repeat-x;<br />
background-position: center;}<br />
</style><br />
</head><br />
<body><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: center 100%==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
font: 12px sans-serif;<br />
}<br />
p {<br />
background: yellow;<br />
padding: 3px;<br />
clear: left;<br />
}<br />
div {<br />
height: 81px;<br />
width: 81px;<br />
margin: 20px;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
float: left;<br />
border: 1px solid rgb(128, 128, 128);<br />
}<br />
div#percentage-keyword {<br />
background-position: center 100%;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="percentage-keyword"><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: center 10px==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
font: 12px sans-serif;<br />
}<br />
p {<br />
background: yellow;<br />
padding: 3px;<br />
clear: left;<br />
}<br />
div {<br />
height: 81px;<br />
width: 81px;<br />
margin: 20px;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
float: left;<br />
border: 1px solid rgb(128, 128, 128);<br />
}<br />
div#length-keyword {<br />
background-position: center 10px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="length-keyword"><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: center and background-repeat: repeat==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#repeat-single {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(234, 234, 234);<br />
margin: 4px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
<br />
background-position: center;<br />
background-repeat: repeat;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="repeat-single"></div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: center and background-repeat: repeat-y==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#repeat-y-single {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(234, 234, 234);<br />
margin: 4px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
<br />
background-position: center;<br />
background-repeat: repeat-y;<br />
} </style><br />
</head><br />
<body><br />
<div id="repeat-y-single"></div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: center center==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#center-center {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 10px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: center center;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="center-center">center, center</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: center center and background-repeat: repeat-x==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#repeat-x {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(234, 234, 234);<br />
margin: 4px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
<br />
background-position: center center;<br />
background-repeat: repeat-x;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="repeat-x"></div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: center center and background-repeat: repeat-y==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#repeat-y {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(234, 234, 234);<br />
margin: 4px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
<br />
background-position: center center;<br />
background-repeat: repeat-y;<br />
} </style><br />
</head><br />
<body><br />
<div id="repeat-y"></div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
=="background-position" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
</head><br />
<body><br />
<div style="background:blue url(http://www.wbex.ru/style/logo.png) repeat top left; <br />
width:200; <br />
border:3; <br />
height:150; <br />
font-size:14"><br />
<br />
text in first div element.<br />
</div><br />
<br><br><br><br><br><br><br><br><br><br />
<div style="background-color:red; <br />
background-attachment:fixed; <br />
background-image:url(http://www.wbex.ru/style/logo.png); <br />
background-repeat:repeat; <br />
background-position-x:top; <br />
background-position-y:right; <br />
width:200; <br />
border:3; <br />
height:150; <br />
font-size:14"><br />
<br />
background-position-x is set to top. <br><br />
background-position-y is set to right. <br />
<br />
</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: left==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<title>Background position left</title><br />
<style><br />
body {background-color: cyan;<br />
background-image: url(http://www.wbex.ru/style/logo.png);<br />
background-repeat: repeat-x;<br />
background-position: left;}<br />
</style><br />
</head><br />
<body><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: left center==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#left-center {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 10px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: left center; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="left-center">left, center</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: left top==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
html, body {<br />
height: 1000px;<br />
}<br />
body {<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
background-position: left top;<br />
}<br />
</style><br />
</head><br />
<body><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: right==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<title>Background position right </title><br />
<style><br />
body {background-color: cyan;<br />
background-image: url(http://www.wbex.ru/style/logo.png);<br />
background-repeat: repeat-x;<br />
background-position: right;}<br />
</style><br />
</head><br />
<body><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Background position: right bottom==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Background position, right bottom</title><br />
<style type="text/css"><br />
div {<br />
background-image: url(images/background.gif);<br />
background-repeat: no-repeat;<br />
background-position: right bottom;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<br />
<div><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
</div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: right center==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#right-center {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 10px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: right center; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="right-center">right, center</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Background-position specifies a position by keyword.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
font: 12px sans-serif;<br />
}<br />
p {<br />
background: yellow;<br />
padding: 3px;<br />
clear: left;<br />
}<br />
div {<br />
height: 81px;<br />
width: 81px;<br />
margin: 20px;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
float: left;<br />
border: 1px solid rgb(128, 128, 128);<br />
}<br />
div#keyword {<br />
background-position: center center;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="keyword"><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Background-position specifies a position by length.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
font: 12px sans-serif;<br />
}<br />
p {<br />
background: yellow;<br />
padding: 3px;<br />
clear: left;<br />
}<br />
div {<br />
height: 81px;<br />
width: 81px;<br />
margin: 20px;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
float: left;<br />
border: 1px solid rgb(128, 128, 128);<br />
}<br />
div#length {<br />
background-position: 10px 10px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="length"><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Background-position specifies a position by percentage.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
font: 12px sans-serif;<br />
}<br />
p {<br />
background: yellow;<br />
padding: 3px;<br />
clear: left;<br />
}<br />
div {<br />
height: 81px;<br />
width: 81px;<br />
margin: 20px;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
float: left;<br />
border: 1px solid rgb(128, 128, 128);<br />
}<br />
div#percentage {<br />
background-position: 60% 60%;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="percentage"><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: top 10px==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#keyword-length {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 4px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: top 10px; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="keyword-length">top, 10px</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: top center==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#top-center {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 10px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: top center; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="top-center">top, center</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: top left==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#top-left {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 10px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: top left; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="top-left">top, left</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==background-position: top right==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
div#top-right {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(128, 128, 128);<br />
margin: 10px;<br />
float: left;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
font: 12px sans-serif;<br />
background-position: top right; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="top-right">top, right</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==By length and percentage==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>background-position</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
font: 12px sans-serif;<br />
}<br />
p {<br />
background: yellow;<br />
padding: 3px;<br />
clear: left;<br />
}<br />
div {<br />
height: 81px;<br />
width: 81px;<br />
margin: 20px;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-repeat: no-repeat;<br />
float: left;<br />
border: 1px solid rgb(128, 128, 128);<br />
}<br />
div#length-percentage {<br />
background-position: 80% 10px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="length-percentage"><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==The background is positioned 40 pixels from the left and 3 ems from the top==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Background position, 40px 3em</title><br />
<style type="text/css"><br />
div {<br />
background-image: url(images/background.gif);<br />
background-repeat: no-repeat;<br />
background-position: 40px 3em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<br />
<div><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
<p>this is a text.</p><br />
</div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==The background-position Property (for fixing position of backgrounds)==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
Value Meaning<br />
x% y% Percentages along the x (horizontal) and y (vertical) axis.<br />
x y Absolute lengths along the x (horizontal) and y (vertical) axis.<br />
left Show to the left of the page or containing element.<br />
center Show to the center of the page or containing element.<br />
right Show to the right of the page or containing element.<br />
top Shown at the top of the page or containing element.<br />
center Shown at the center of the page or containing element.<br />
bottom Shown at the bottom of the page or containing element.<br />
</source></div>
Admin