Create QuizBackground component

TheeDouglasAM3 · Jan 25, 2021 · 95b4df6 · 95b4df6
1 parent 1fc0f9b
commit 95b4df6
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/pokemon-quiz-nextjs/src/components/QuizBackground/index.js b/pokemon-quiz-nextjs/src/components/QuizBackground/index.js
@@ -0,0 +1,36 @@
+// src/components/QuizBackground/index.js
+import styled from 'styled-components';
+
+const QuizBackground = styled.div`
+ width: 100%;
+ background-size: cover;
+ background-position: center;
+ background-image: url(${({ backgroundImage }) => backgroundImage});
+ background-color: ${({ theme }) => theme.colors.mainBg};
+ flex: 1;
+ @media screen and (max-width: 500px) {
+ background-image: none;
+ &:after {
+ content: "";
+ background-size: cover;
+ background-position: center;
+ background-image:
+ linear-gradient(transparent, ${({ theme }) => theme.colors.mainBg}),
+ url(${({ backgroundImage }) => backgroundImage});
+ display: block;
+ width: 100%;
+ height: 210px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1;
+ }
+ *:first-child {
+ position: relative;
+ z-index: 10;
+ }
+ }
+`;
+
+export default QuizBackground;