Update .png to .webp

bluehands · Jul 7, 2024 · a125e4d · a125e4d
1 parent f107b07
commit a125e4d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 26 deletions.
diff --git a/css/mobile.css b/css/mobile.css
@@ -35,7 +35,7 @@
 		width: 50%;
 	}
 	#header span#mobile-navigation {
-		background: transparent url(../images/mobile/mobile-menu.png) no-repeat;
+		background: transparent url(../images/mobile/mobile-menu.webp) no-repeat;
 		display: block;
 		height: 50px;
 		margin: 0;
@@ -89,7 +89,7 @@
 		width: auto;
 	}
 	#header .mobile-submenu {
-		background: rgba(121, 101, 102, 0.91) url(../images/mobile/mobile-expand.png) no-repeat center;
+		background: rgba(121, 101, 102, 0.91) url(../images/mobile/mobile-expand.webp) no-repeat center;
 		border-left: 1px solid #f8f8f8;
 		display: inline-block;
 		height: 3.4em;

diff --git a/css/style.css b/css/style.css
@@ -175,21 +175,22 @@ html, body {
 #body.home div.header img {
 	display: block;
 	/* left: 50%; */
-	/* margin: 0 auto 0 -563px; */
+	margin: 0;
 	padding: 0;
-	position: absolute;
+	position: relative;
 	max-width: 960px;
 	/* height: auto; */
+	min-height: 660px;
 }
 #body.home div.header div {
 	margin: 0 auto;
 	max-width: 960px;
-	min-height: 660px;
+	height: 660px;
 	padding: 0;
 	position: relative;
 }
 #body.home div.header div a {
-	background: url(../images/icons.png) no-repeat 0 -128px;
+	background: url(../images/icons.webp) no-repeat 0 -128px;
 	color: #FFFFFF;
 	display: block;
 	font-family: quicksand-bold-webfont;
@@ -338,7 +339,7 @@ html, body {
 	width: 220px;
 }
 #body.home div.footer div ul li a {
-	background: url(../images/icons.png) no-repeat;
+	background: url(../images/icons.webp) no-repeat;
 	display: block;
 	height: 44px;
 	margin: 0 auto 22px;
@@ -889,7 +890,7 @@ html, body {
 	padding: 39px 0 0;
 }
 #body.contact div.body div div {
-	background: url(../images/bg-transparent.png) repeat;
+	background: url(../images/bg-transparent.webp) repeat;
 	margin: 0 auto;
 	overflow: hidden;
 	padding: 30px 0 35px 133px;
@@ -1056,28 +1057,31 @@ html, body {
 }
 #body div.footer .section p a:hover {
 }
-
-
 /* ADDED FROM DUSTIN */
 
-
 .background-div {
-    background-image: url('../images/backround.png'); /*Path to your image*/
-    background-size: contain; /* Ensure the entire image is visible */
-    background-position: center; /* Center the image */
-    background-repeat: no-repeat; /* Prevent the image from repeating */
+    position: relative;
+    width: 100%; /* Set the desired width */
+    height: 100%; /* Set the desired height */
+    overflow: hidden; /* Ensure content doesn't overflow */
+}
+
+.background-img {
+    object-fit: contain; /* Ensure the entire image is visible */
+	object-position: center;
+	background-size: contain;
 }
 
 #body.impressum {
-    background-color: #1a6c68; /* Light grey background */
+    background-color: #1a6c68; 
     padding: 20px; /* Padding around the content */
     font-family: Verdana, Geneva, Tahoma, sans-serif; /* Font style */
     color: #ffffff; /* Text color */
 	text-align: center;
 	font-size: 20px;
 }
 #body.datenschutz {
-    background-color: #1a6c68; /* Light grey background */
+    background-color: #1a6c68; 
     padding: 20px; /* Padding around the content */
     font-family: Verdana, Geneva, Tahoma, sans-serif; /* Font style */
     color: #ffffff; /* Text color */
@@ -1087,9 +1091,7 @@ html, body {
 #body.datenschutz a{
 	color: #ffffff;
 	text-decoration: underline;
-
 }
-
 /*----------------------------------------footer-styles---------------------------------------*/
 #footer {
     background-color: #b0c95e;
@@ -1098,7 +1100,6 @@ html, body {
     width: 100%;
     text-align: center;
 }
-
 #footer div {
     margin: 0 auto;
     max-width: 960px;
@@ -1128,7 +1129,6 @@ html, body {
 #footer a:hover {
     text-decoration: underline; /* Underline on hover */
 }
-
 /* #footer div .connect {
 	display: block;
 	height: 30px;
@@ -1139,7 +1139,7 @@ html, body {
 	width: 240px;
 }
 #footer div .connect a {
-	background: url(../images/icons.png) no-repeat;
+	background: url(../images/icons.webp) no-repeat;
 	display: block;
 	float: left;
 	height: 30px;

diff --git a/js/mobile.js b/js/mobile.js
@@ -9,10 +9,10 @@ window.onload = function(){
 		var a = getNavi.getAttribute('style');
 		if(a){
 			getNavi.removeAttribute('style');
-			document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-menu.png)';
+			document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-menu.webp)';
 		} else {
 			getNavi.style.display='block';
-			document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-close.png)';
+			document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-close.webp)';
 		}
 	};
 	var getElm = getNavi.getElementsByTagName("LI");
@@ -29,11 +29,11 @@ window.onload = function(){
 		var b = sub.getAttribute('style');
 		if(b){
 			sub.removeAttribute('style');
-			getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-expand.png)';
+			getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-expand.webp)';
 			getElm[i].lastChild.style.backgroundColor='rgba(121, 101, 102, 0.91)';
 		} else {
 			sub.style.display='block';
-			getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-collapse.png)';
+			getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-collapse.webp)';
 			getElm[i].lastChild.style.backgroundColor='rgba(204, 60, 104, 0.91)';
 		}
 	};