HTML/CSS/Box Model/background repeat
Содержание
- 1 background-repeat: no-repeat
- 2 My Amazing Web Site
- 2.1 Contact Form
- 2.2 header
- 2.3 background-repeat:repeat
- 2.4 This is a header 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. this is a test. this is a test. this is a test.
- 2.5 background-repeat:repeat-y
- 2.6 This is a header 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. this is a test. this is a test. this is a test.
- 2.7 Set background image and repeat separately
- 2.8 Set background repeat: repeat-x
- 2.9 This is a header
background-repeat: no-repeat
<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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> <style type="text/css"> div#header{
position:relative; background-image: url(rocketship.gif); background-repeat: no-repeat; background-position: 10px 0px;
} </style> </head> <body>
My Amazing Web Site
Contact Form
This is a test.
Please fill out our form below in order to contact me.
<form id="form1" name="form1" method="post" action="/">
<label for="fmtitle" accesskey="i">Title</label>
<select name="fmtitle" id="fmtitle">
<option value="ms">Ms.</option>
<option value="mrs">Mrs.</option>
<option value="miss">Miss</option>
<option value="mr">Mr.</option>
</select>
<label for="fmname" accesskey="n">Name</label> <input type="text" name="fmname" id="fmname" /> <label for="fmemail" accesskey="e">Email</label> <input type="text" name="fmemail" id="fmemail" /> <label for="fmstate" accesskey="a">State/Province</label> <input type="text" name="fmstate" id="fmstate" /> <label for="fmstate" accesskey="y">Country</label> <input type="text" name="fmcountry" id="fmcountry" /> <label for="fmmsg">Message</label> <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea> <input type="submit" name="submit" value="send »" class="submit" /> </form>
Note: Due to our busy schedules, we cannot answer every message.
header
This is a text
</body> </html>
</source>
background-repeat:repeat
<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(http://www.wbex.ru/style/logo.png); background-repeat: repeat; background-position: bottom; margin: 10px 0 0 0; padding: 0.5em 0 60px 0; width: 600; height: 600;
} </style> </head> <body>
This is a header 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. this is a test. this is a test. this is a test.
This is a text.
</body> </html>
</source>
background-repeat:repeat-y
<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(http://www.wbex.ru/style/logo.png); background-repeat: repeat-y; background-position: bottom; margin: 10px 0 0 0; padding: 0.5em 0 60px 0; width: 600; height: 600;
} </style> </head> <body>
This is a header 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. this is a test. this is a test. this is a test.
This is a text.
</body> </html>
</source>
Set background image and repeat separately
<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>Set background image and repeat separately</title> <style type="text/css"> span.initcap {
display: none;
} p {
line-height: 1em; background-image: url(initcap-o.gif); background-repeat: no-repeat; text-indent: 35px; padding-top: 45px;
} </style> </head> <body>
Online. 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. This is a test. This is a test. This is a test.
</body> </html>
</source>
Set background repeat: repeat-x
<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(tall_grass.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>