HTML/CSS/Box Model/background position — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 12:21, 26 мая 2010
Содержание
- 1 background image position: left, right, top and bottom
- 2 pristine & clean
- 3 background-position: left;
- 4 background-position: right;
- 5 background-position: bottom;
- 6 background-position: center;
- 7 header 1!
- 8 pristine & clean
- 9 top left
- 10 top right
- 11 center center
- 12 right center
- 13 bottom left
- 14 bottom center
- 15 bottom right
- 16 Header 1
- 17 header 1
background image position: left, right, top and bottom
<source lang="html4strict">
<!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>
pristine & clean
background-position: left;
background-position: right;
background-position: bottom;
background-position: center;
</body> </html>
</source>
Background images repeat in both directions by default
<source lang="html4strict">
<!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>
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.
</body> </html>
</source>
background position: top right
<source lang="html4strict">
<!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>
header 1!
header 2
</body> </html>
</source>
control different background image position: center, top center,x,x
<source lang="html4strict">
<!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>
header 2
header 3
This is a text.
</body>
</html>
</source>
h1 with background image of different position
<source lang="html4strict">
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>
pristine & clean
top left
top right
center center
right center
bottom left
bottom center
bottom right
</body> </html>
</source>
Set background-position: bottom;
<source lang="html4strict">
<!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>
This is a header
This is a text.
</body> </html>
</source>
Set background-position to -125px 75px
<source lang="html4strict">
<!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>
Header 1
Header 2
Header 3
</body>
</html>
</source>
set background position to center
<source lang="html4strict">
<!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>
header 1
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.
</body> </html>
</source>
The background repeats horizontally along the x-axis
<source lang="html4strict">
<!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>
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.
</body> </html>
</source>
The background repeats vertically along the y-axis
<source lang="html4strict">
<!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>
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.
</body> </html>
</source>
Use image as background with background-position: center bottom
<source lang="html4strict">
<!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>
</body> </html>
</source>
Use image as background with background-position: right bottom
<source lang="html4strict">
<!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>
</body> </html>
</source>