HTML/CSS/Box Model/background position

Материал из Web эксперт
Перейти к: навигация, поиск

background image position: left, right, top and bottom

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Positioning Backgrounds</title>
<style>
body {
font: 16px Verdana, Arial, Helvetica, sans-serif;
margin: 20px;
color: black;
background-color: #FFFFCC;
}
h1 {
font: 24px Verdana, Arial, Helvetica, sans-serif;
margin: 20px;
padding: 35px;
border: 2px solid;
}
h1.left {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: left;
}
h1.right {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: right;
}
h1.bottom {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: bottom;
}
h1.center {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>pristine &amp; clean</h1>
<h1 class="left">background-position: left;</h1>
<h1 class="right">background-position: right;</h1>
<h1 class="bottom">background-position: bottom;</h1>
<h1 class="center">background-position: center;</h1>
</body>
</html>



Background images repeat in both directions by default

 
<!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" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Listing 5-9. A tiling background image</title>
  <style type="text/css">
  body { 
    background-image: url(images/background.gif);
  }
  </style>
</head>
<body>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
</body>
</html>



background position: top right

 
<!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">
<head>
  <title></title>
<style type="text/css">
div {
 background-image: url(f.jpg);
 background-repeat: no-repeat;
 background-position: top right;
 height: 300px;
 border: 1px solid black;
 max-width: 714px;
}
</style>
</head>
<body>
  <h1>header 1!</h1>
   <div><img src="http://www.wbex.ru/style/logo.png" alt=" " /></div>
  <h2>header 2</h2>
</body>
</html>



control different background image position: center, top center,x,x

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title></title>
<style type="text/css">
h2 {
    padding-top: 72px;
    text-align: center;
    Background-image: url(p.gif), url(m.gif), url(printer.gif), url(gift.gif);
    Background-position: center, top center, 40% 24px, 60% 24px;
    Background-repeat: no-repeat;
}
</style>
    </head>
    <body>
<h2>header 2</h2>
<h3>header 3</h3>
<p>This is a text.</p>

    </body>
</html>



h1 with background image of different position

 
Positioning Backgrounds
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Positioning Backgrounds</title>
<style type="text/css">
h1 {
font: 24px Verdana, Arial, Helvetica, sans-serif;
margin: 20px;
padding: 35px;
border: 2px solid;
}
h1.topLeft {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: top left;
}
h1.topRight {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: top right;
}
h1.centerCenter {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: center center;
}
h1.rightCenter {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: right center;
}
h1.bottomLeft {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: bottom left;
}
h1.bottomCenter {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: bottom center;
}
h1.bottomRight {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
</head>
<body>
<h1>pristine &amp; clean</h1>
<h1 class="topLeft">top left</h1>
<h1 class="topRight">top right</h1>
<h1 class="centerCenter">center center</h1>
<h1 class="rightCenter">right center</h1>
<h1 class="bottomLeft">bottom left</h1>
<h1 class="bottomCenter">bottom center</h1>
<h1 class="bottomRight">bottom right</h1>
</body>
</html>



Set background-position: bottom;

 
<!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">
<head>
<title></title>
<style type="text/css">
h2 { 
 background-image: url(t.jpg);
 background-repeat: repeat-x;
 background-position: bottom;
 border-bottom: 10px solid #666;
 margin: 10px 0 0 0;
 padding: 0.5em 0 60px 0;
}
</style>
</head>
<body>
  <h2>This is a header</h2>
  <p>This is a text.</p>
</body>
</html>



Set background-position to -125px 75px

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title></title>
<style type="text/css">
body {
 background-image: url(b.jpg);
 background-position: -125px 75px;
 margin: 75px 75px 0 375px; 
}
h1, h2, h3 {
 padding-top: 0;
 margin-top: 0;
 text-transform: uppercase;
}
</style>
    </head>
    <body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
  </body>
</html>



set background position to center

 
<!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" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
h1, h2, h3 {
 font-size: 200%;
 background-image: url(bkgd2.jpg);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
 padding: 1.5em;
 text-align: center;
 color: white;
}
</style>
</head>
<body>
  <h1>header 1</h1>
  <p>This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.</p>
</body>
</html>



The background repeats horizontally along the x-axis

 
<!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" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Repeating horizontally</title>
  <style type="text/css">
  body { 
    background-image: url(images/background.gif);
    background-repeat: repeat-x;
  }
  </style>
  
</head>
<body>
  
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
</body>
</html>



The background repeats vertically along the y-axis

 
<!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" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Repeating vertically</title>
  <style type="text/css">
  body { 
    background-image: url(images/background.gif);
    background-repeat: repeat-y;
  }
  </style>
  
</head>
<body>
  
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
  <p>this is a text.</p>
</body>
</html>



Use image as background with background-position: center bottom

 
<!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">
<head>
<title></title>
<style type="text/css">
* .bg-pos-lt {
  background-position: center bottom;
  width: 300px;
  height: 300px;
  background-image: url(http://www.wbex.ru/style/logo.png);
  
}
</style>
</head>
<body>
  <p><div class="bg-pos-lt">Background image center bottom</div></p> 
  
</body>
</html>



Use image as background with background-position: right bottom

 
<!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">
<head>
<title></title>
<style type="text/css">
* .bg-pos-rb {
  background-position: right bottom;
  width: 300px;
  height: 300px;
  background-image: url(http://www.wbex.ru/style/logo.png);
  
}
</style>
</head>
<body>
  <p><div class="bg-pos-rb">Background image right bottom</div></p> 
  
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/background_position&oldid=5227»