diff --git a/src/components/Background.js b/src/components/Background.js
index 192290b..61c6037 100644
--- a/src/components/Background.js
+++ b/src/components/Background.js
@@ -1,8 +1,9 @@
import styled from "styled-components";
import FlagRight from "../images/FlagRight.svg";
-import FlagLeft from "../images/FlagRight.svg";
+import FlagLeft from "../images/FlagLeft.svg";
import VoteSignRight from "../images/VoteSignRight.svg";
-import VoteSignLeft from "../images/VoteSignLeft.svg";
+import VoteSignLeft1 from "../images/VoteSignLeft1.svg";
+import VoteSignLeft2 from "../images/VoteSignLeft2.svg";
import FlagHighLow from "../images/FlagHighLow.svg";
import FlagLowHigh from "../images/FlagLowHigh.svg";
@@ -22,10 +23,11 @@ const LeftFlag = styled.div`
left: 0;
width: 21vw;
height: 100%;
- background-image: url(${FlagLeft});
- background-repeat: repeat-y;
- background-size: 100% 150em;
- background-position: left 0;
+ background-image: url(${FlagLeft}), url(${FlagLeft}); /* Two instances */
+ background-repeat: no-repeat, no-repeat;
+ background-size: 100% 55vh, 100% 55vh; /* Adjusts each flag's size */
+ background-position: left 10vh, left 700vh; /* Creates spacing for zig-zag pattern */
+ z-index: 20;
`;
// Right Flag
@@ -35,92 +37,109 @@ const RightFlag = styled.div`
right: 0;
width: 21vw;
height: 100%;
- background-image: url(${FlagRight});
- background-repeat: repeat-y;
- background-size: 100% 150em;
- background-position: right 10vh;
+ background-image: url(${FlagRight}), url(${FlagRight}); /* Two instances */
+ background-repeat: no-repeat, no-repeat;
+ background-size: 100% 55vh, 100% 55vh; /* Adjusts each flag's size */
+ background-position: right 50vh, right 850vh; /* Creates spacing for zig-zag pattern */
transform: scaleX(-1);
+ z-index: 20;
`;
// Left Vote Sign
-const LeftVoteSign = styled.div`
+const LeftVoteSign1 = styled.div`
position: absolute;
- top: 0;
+ top: 400vh; /* Adjusted to provide spacing and ensure visibility */
left: 0;
- width: 20vw;
- height: 100%;
- background-image: url(${VoteSignLeft});
+ width: 20vw;
+ height: auto;
+ min-height: 160vh;
+ background-image: url(${VoteSignLeft1});
background-repeat: repeat-y;
- background-size: 100% 160em;
- background-position: left 100em;
- z-index: 3; /* Set to 3 to be on top of everything */
+ background-size: 100% 160vh; /* Scales to maintain spacing */
+ background-position: left 10vh;
+ z-index: 20; /* Above background flags and below article cards */
+`;
+
+const LeftVoteSign2 = styled.div`
+ position: absolute;
+ top: 20vh; /* Adjusted to provide spacing and ensure visibility */
+ left: -20vh;
+ width: 30vw;
+ height: auto;
+ min-height: 160vh;
+ background-image: url(${VoteSignLeft2});
+ background-repeat: repeat-y;
+ background-size: 100% 160vh; /* Scales to maintain spacing */
+ background-position: left 10vh;
+ z-index: 20; /* Above background flags and below article cards */
`;
// Right Vote Sign
const RightVoteSign = styled.div`
position: absolute;
- top: 0;
+ top: 150vh;
right: 0;
width: 20vw;
- height: 100%;
+ height: auto;
+ min-height: 160vh;
background-image: url(${VoteSignRight});
background-repeat: repeat-y;
- background-size: 100% 150em;
- background-position: right 200em;
+ background-size: 100% 160vh;
+ background-position: right 20vh;
+ z-index: 20;
`;
-// Horizontal Flag Strings
+// Horizontal Flag Strings (Background layer)
const HighLowFlag1 = styled.div`
position: absolute;
- top: 100em; /* Adjust based on desired layout placement */
+ top: 200vh;
left: 0;
width: 100%;
- height: 150vh; /* Adjust to control flag height */
+ height: 150vh;
background-image: url(${FlagHighLow});
background-repeat: repeat-y;
- background-size: cover;
- background-position: center;
- z-index: 0; /* Set to 1 to be above the background */
+ background-size: cover;
+ background-position: center;
+ z-index: 0;
`;
const HighLowFlag2 = styled.div`
position: absolute;
- bottom: -20em; /* Adjust based on desired layout placement */
+ bottom: -20vh;
left: 0;
width: 100%;
- height: 150vh; /* Adjust to control flag height */
+ height: 150vh;
background-image: url(${FlagHighLow});
background-repeat: repeat-y;
- background-size: cover;
- background-position: center;
- z-index: 0; /* Set to 1 to be above the background */
-
+ background-size: cover;
+ background-position: center;
+ z-index: 0;
`;
const LowHighFlag1 = styled.div`
position: absolute;
- top: -5%;
+ top: -5vh;
left: 0;
width: 100%;
- height: 150vh; /* Adjust to control flag height */
+ height: calc(200vh + 300px);
background-image: url(${FlagLowHigh});
background-repeat: repeat-y;
- background-size: cover;
- background-position: center;
- z-index: 0; /* Set to 0 to be at the back */
+ background-size: cover;
+ background-position: center;
+ z-index: 0;
`;
const LowHighFlag2 = styled.div`
position: absolute;
- top: 340em; /* Adjust based on desired layout placement */
+ top: 400vh;
left: 0;
width: 100%;
- height: 150vh; /* Adjust to control flag height */
+ height: calc(200vh + 300px);
background-image: url(${FlagLowHigh});
background-repeat: repeat-y;
- background-size: cover;
- background-position: center;
- z-index: 0; /* Set to 1 to be above the background */
+ background-size: cover;
+ background-position: center;
+ z-index: 0;
`;
const Background = () => {
@@ -128,11 +147,12 @@ const Background = () => {
-
-
+
+
-
-
+
+
+
);
diff --git a/src/images/VoteSignLeft1.svg b/src/images/VoteSignLeft1.svg
new file mode 100644
index 0000000..ef90cb0
--- /dev/null
+++ b/src/images/VoteSignLeft1.svg
@@ -0,0 +1,90 @@
+
diff --git a/src/images/VoteSignLeft2.svg b/src/images/VoteSignLeft2.svg
new file mode 100644
index 0000000..1c113ac
--- /dev/null
+++ b/src/images/VoteSignLeft2.svg
@@ -0,0 +1,90 @@
+
\ No newline at end of file