HTML/CSS/Box Model/background image
Содержание
- 1 Adding background images and indentation
- 2 background-image and background-color
- 3 Only part of a large background image is visible because the element"s height is determined by the length of its contents.
- 4 Set background image for first line text in paragraph
- 5 Set more than one image for background
- 6 header 2
- 7 Set style for strong to normal font weight and background color to yellow
- 8 Use background-image:none to show no background image
Adding background images and indentation
<source lang="html4strict">
<?xml version = "1.0"?> <!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>Background Images</title> <style type = "text/css"> body { background-image: url(http://www.wbex.ru/style/logo.png); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed; } p { font-size: 18pt; color: #aa5588; text-indent: 1em; font-family: arial, sans-serif; } .dark { font-weight: bold; } </style> </head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body>
</html>
</source>
background-image and background-color
<source lang="html4strict">
<?xml version="1.0" ?> <!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>CSS Example</title> <style rel="stylesheet" type="text/css">
body {
background-image: url(http://www.wbex.ru/style/logo.png); background-color: #ffffff; color: #000000; font-size: 24px; font-weight: bold;
} </style> </head> <body>
This example illustrates the background-image property.
</body> </html>
</source>
Only part of a large background image is visible because the element"s height is determined by the length of its contents.
<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>Large background</title> <style type="text/css"> div { background-image: url(images/bigslice.gif); background-repeat: no-repeat; } </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>
Set background image for first line text in paragraph
<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"> p:first-line {
font-size: 2em; background-image: url(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. 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>
Set more than one image for background
<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(plane.gif), url(mail.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>
Set style for strong to normal font weight and background color to yellow
<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"> strong {
font-weight: normal; background-color: yellow;
} </style> </head> <body>
not strong strong.
</body> </html>
</source>
Use background-image:none to show no background image
<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">
- .no-bg {
background-image: none; background-color: transparent;
}
</style> </head> <body>
</body> </html>
</source>