Merge pull request #15 from JulieSagan/06-lection/background-img

Used background-image
js-tasks-ru · Dec 19, 2024 · c6f98e0 · c6f98e0
2 parents b647b4a + 421f955
commit c6f98e0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/06-lection4/02-background-image/background-image.css b/06-lection4/02-background-image/background-image.css
@@ -0,0 +1,26 @@
+.background {
+    width: 100%;
+    height: 400px;
+    background-image: url(./public/forest_400.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
+@media screen and (min-width: 768px) {
+    .background {
+        background-image: url(./public/forest_768.jpg);
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .background {
+        background-image: url(./public/forest_1024.jpg);
+    }
+}
+
+@media screen and (min-width: 2560px) {
+    .background {
+        background-image: url(./public/forest_2560.jpg);
+    }
+}
diff --git a/06-lection4/02-background-image/index.html b/06-lection4/02-background-image/index.html
@@ -5,6 +5,9 @@
         <link rel="stylesheet" href="./background-image.css">
     </head>
     <body>
-
+        <div class="container">
+            <div class="background">
+            </div>
+        </div>
     </body>
 </html>