yarynakinash · yarynakinash · Sep 9, 2017 · Aug 22, 2017 · Aug 22, 2017 · Aug 22, 2017
diff --git a/img/block-1-bg.png b/img/block-1-bg.png
diff --git a/img/body-bg.png b/img/body-bg.png
diff --git a/img/button-1.png b/img/button-1.png
diff --git a/img/content-bg.png b/img/content-bg.png
diff --git a/img/lines-4.png b/img/lines-4.png
diff --git a/img/picture-1.png b/img/picture-1.png
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Document</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<div class="content">
+	<div class="content-top"></div>
+	<div class="content-middle">
+		<h1>Ознайомлення з css-правилом "background"</h1>
+		<p>Властивість background дозволяє створити стиль фону, визначивши в одній стрічці відразу кілька атрибутів: колір фону, фонову картинку, її положення.</p>		
+		<h2>Правило background-repeat</h2>
+		<div class="block-1">
+			<p>Властивість background-repeat управляє способом "розмноження" - циклічного повторення фонового зображення.</p>
+			<p>Можливі значення: <br/>
+			<strong>repeat-x</strong> - Розмножує зображення тільки по вертикалі. <br/>
+			<strong>repeat-y</strong> - Розмножує зображення тільки по горизонталі. <br/>
+			<strong>repeat</strong> - Розмножує зображення в обох напрямах - і по горизонталі і по вертикалі. <br/>
+			<strong>no-repeat</strong> - Не розмножує зображення. <br/>
+			<strong>inherit</strong> - Запозичує значення властивості у батьківського елементу.</p>
+		</div>
+
+		<h2>Значення властивості position</h2>
+		<div class="block-2">
+			<p>Властивість background-position встановлює місце розташування фонової картинки. При цьому властивості зазвичай привласнюється пара значень для визначення горизонтального і вертикального положень.</p>
+		</div>
+
+		<h2>Використання зображень-спрайтів для фону елементів</h2>
+		<p>CSS спрайт - це декілька різних картинок об'єднані в одне ціле зображення. Це зображення встановлюється як фонове для будь-якого елементу із заданою висотою і шириною.</p>
+		<a class="button" href="#button"></a>
+	</div>
+	<div class="content-bottom"></div>
+</div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,81 @@
+body {
+    background-color: #638a79;
+    background-image: url("img/body-bg.png");
+    background-repeat: repeat-x;
+    background-attachment: fixed;
+    font-size: 13px;
+    line-height: 18px;
+    color: #333;
+    font-family: Arial;
+}
+
+.content {
+	width: 840px;
+	background-color: #fff;
+	margin: 100px auto 0;
+}
+.content .content-top {
+	height: 12px;
+	background-image: url("img/content-bg.png");
+	background-position: 0px 0px;
+}
+.content .content-bottom {
+	height: 12px;
+	background-image: url("img/content-bg.png");
+	background-position: -840px -840px;
+}
+.content .content-middle {
+	padding: 20px 30px;
+}
+
+h1 {
+	font-size: 26px;
+	line-height: 36px;
+	color: #2b8c57;
+	font-weight: normal;
+	margin-bottom: 10px;
+}
+h2 { 
+	font-size: 18px;
+	line-height: 28px;
+	color: #2b8c57;
+	font-weight: normal;
+	font-style: italic;
+	margin-top: 30px;
+	margin-bottom: 15px;
+}
+
+div.block-1 {
+	color: #fff;
+	font-style: italic;
+	font-size: 12px;
+	background-image: url("img/block-1-bg.png");
+	background-repeat: repeat-x;
+	background-color: #2b8c57;
+	padding: 20px 30px;
+}
+div.block-2 {
+	background-color: #356149;
+	background-image: url("img/picture-1.png");
+	background-repeat: no-repeat;
+	background-position: right bottom;
+	color: #fff;
+	font-style: italic;
+	font-size: 12px;
+	padding: 20px 30px;
+}
+
+a.button {
+	background-image: url("img/button-1.png");
+	background-position: 0px 0px;
+	display:block;
+	width: 121px;
+	height: 38px;
+	text-decoration: none;
+}
+a.button:hover {
+	background-position: 0px -38px;
+}
+a.button:active {
+	background-position: 0px -76px;
+}