seodon.ru | Фоновые изображения в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Фоновые изображения в HTML</title>
<style type="text/css">
a:hover {color:#9999CC}
</style>
</head>
<body style="background:#333366 url('image/fon1.gif')">

<h1 style="color:#9999CC; text-decoration:underline">Lorem ipsum dolor</h1>
<p style="background:#FFFFFF url('image/fon2.gif')">Lorem ipsum dolor sit amet consectetuer neque sagittis Vestibulum eu leo. Rutrum nunc ut In ligula neque ullamcorper quis libero mattis nibh. Sagittis rutrum fames felis a eu Sed volutpat Nunc nibh semper. Tincidunt Nullam lacus amet gravida neque malesuada leo ac sem malesuada. Semper tristique mauris pharetra pulvinar auctor tincidunt tincidunt Quisque convallis Vestibulum. Lacus pretium Sed.</p>

<p style="background:#FFFFFF url('image/fon2.gif')">Lacus mollis neque Aliquam Quisque malesuada eget ligula sapien Aenean pharetra. Condimentum orci Curabitur porta nulla nec interdum et vel ante non. Eros vel Nulla semper nunc nibh Vestibulum vel Nullam tempus Nulla. Et quam nec sagittis cursus eget ac volutpat vitae eget quis. Semper id sit dis Aenean Nulla eu ante Pellentesque lorem sem. Tellus Curabitur massa Pellentesque justo adipiscing felis auctor justo condimentum.</p>

<p style="background:#FFFFFF url('image/fon2.gif')">Pretium mattis sagittis Sed lacinia tristique magnis dignissim nec Sed tempus. Libero urna Nunc lorem congue amet condimentum Curabitur Lorem cursus ut. Maecenas Sed fringilla adipiscing eget Aenean risus Nam ornare elit quam. Vestibulum cursus orci rhoncus mauris nibh interdum Curabitur vitae Sed accumsan. Pede augue habitant diam nisl Quisque ipsum volutpat molestie a ante. Phasellus consequat nec vel lacinia eget.</p>

<div style="background:#FFFFFF url('image/fon2.gif')">
 <img src="image/man.jpg" style="float:left; margin:0 10px 10px 5px" width="56" height="135" alt="Человек">
 <p>Ultrices tellus ut semper aliquet pede ac Sed commodo et gravida. Enim enim Donec justo adipiscing velit pellentesque dapibus ridiculus Pellentesque molestie. Ante ligula Curabitur eget sed iaculis quis sit odio ipsum eleifend. Suspendisse ligula nulla wisi In vitae congue tortor Nam massa consequat. Nec lacus Phasellus Sed amet orci volutpat nunc sit tincidunt venenatis. Elit mauris ac vel Nam faucibus Nam at Aenean. Semper mollis In dis ligula justo Integer lorem hendrerit nulla Nullam. Lobortis Quisque justo lorem Fusce at venenatis nibh justo justo pretium. Urna Curabitur et auctor justo In et interdum cursus quis Vestibulum. Phasellus est quis Nam nec pellentesque Aenean eget facilisi lorem Vivamus. Adipiscing mus.</p>
 <p>Wisi convallis Sed Lorem wisi id cursus laoreet justo orci pede. Fusce quis adipiscing netus leo sapien nibh Duis amet vitae Phasellus. Wisi Morbi velit et ac convallis nibh pretium Integer orci Vivamus. Congue id ipsum adipiscing elit urna nunc amet tellus convallis Phasellus. Lacinia pede ipsum Vestibulum Curabitur consequat enim Nam pretium Nam sit. Pede elit lorem dui consectetuer vestibulum turpis nibh pellentesque. Sed nibh enim orci sed congue adipiscing Maecenas In nibh lacus. Mauris laoreet tellus velit Vestibulum at dui tellus eget faucibus ornare. Nulla ligula tristique In orci congue condimentum Aliquam est Curabitur elit. Nunc Duis et augue tincidunt vel eu malesuada turpis quis vel. Nullam eleifend Curabitur massa Cras Maecenas condimentum et aliquet ac Sed. Sit sollicitudin magna dui.</p>
 <p>Non commodo tincidunt magnis <em><a href="https://spravka.seodon.ru/">convallis facilisis</a></em> rutrum Nulla consectetuer orci ut. Massa nunc dapibus Aliquam elit nonummy dui ipsum lacus nibh mattis. Consectetuer dui ligula vitae Curabitur In velit volutpat sit dui Quisque. Tincidunt nunc et adipiscing consequat nulla id. Orci felis Curabitur sodales facilisi Aenean penatibus lacinia laoreet leo dis. Morbi consequat enim auctor id Curabitur non sagittis adipiscing nibh Morbi. Ut tortor Quisque vitae diam Donec id mus tincidunt Nunc Donec. Ipsum Vestibulum Nam quis ac In Fusce leo eu et feugiat. Auctor pretium nunc pharetra vitae velit sem dui laoreet quis tortor. Pulvinar adipiscing Maecenas Phasellus.</p>
</div>
</body>
</html>

Ну что, смогли сами все сделать? Обратите внимание на то, что я поместил изображение сразу внутри тега <DIV>, не помещая его ни в какие дополнительные блоки. Ведь, как помните, <DIV> может содержать и блочные теги и теги уровня строки, которым и является <IMG>. В принципе, я мог его поместить и внутри параграфа или засунуть таки в отдельный блок, на результате бы это не сказалось.

Вернуться в урок

→ Перейти к следующему уроку