From 7ca4a91067c9cd6ed0ece53233d678045b499ec9 Mon Sep 17 00:00:00 2001 From: Julie Date: Mon, 16 Dec 2024 12:48:04 +0200 Subject: [PATCH 1/2] Used background-image --- .../02-background-image/background-image.css | 26 +++++++++++++++++++ 06-lection4/02-background-image/index.html | 5 +++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/06-lection4/02-background-image/background-image.css b/06-lection4/02-background-image/background-image.css index e69de29..3846d75 100644 --- 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 (max-width: 768px) { + .background { + background-image: url(./public/forest_768.jpg); + } +} + +@media screen and (max-width: 1024px) { + .background { + background-image: url(./public/forest_1024.jpg); + } +} + +@media screen and (max-width: 2560px) { + .background { + background-image: url(./public/forest_2560.jpg); + } +} \ No newline at end of file diff --git a/06-lection4/02-background-image/index.html b/06-lection4/02-background-image/index.html index 7a10fca..1cbb993 100644 --- a/06-lection4/02-background-image/index.html +++ b/06-lection4/02-background-image/index.html @@ -5,6 +5,9 @@ - +
+
+
+
From 421f95515fb185a02083fd3bf30f081645fcbe0f Mon Sep 17 00:00:00 2001 From: Julie Date: Tue, 17 Dec 2024 09:05:35 +0200 Subject: [PATCH 2/2] Changed max- on min-width --- 06-lection4/02-background-image/background-image.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/06-lection4/02-background-image/background-image.css b/06-lection4/02-background-image/background-image.css index 3846d75..2f2ac28 100644 --- a/06-lection4/02-background-image/background-image.css +++ b/06-lection4/02-background-image/background-image.css @@ -7,19 +7,19 @@ background-size: cover; } -@media screen and (max-width: 768px) { +@media screen and (min-width: 768px) { .background { background-image: url(./public/forest_768.jpg); } } -@media screen and (max-width: 1024px) { +@media screen and (min-width: 1024px) { .background { background-image: url(./public/forest_1024.jpg); } } -@media screen and (max-width: 2560px) { +@media screen and (min-width: 2560px) { .background { background-image: url(./public/forest_2560.jpg); }