Add full background pattern

client/constants/Pattern.ts

@@ -35,6 +35,7 @@ enum Pattern {
     FixedAtCorner = 'Fixed at corner',
     FixedAtSide = 'Fixed at side',
     FloatingLabel = 'Floating label',
+    FullBackground = 'Full background',
     FullScreenMenu = 'Full screen menu',
     HolyGrail = 'Holy grail',
     InitialAvatar = 'Initial avatar',

client/pages/ExplorePage.tsx

@@ -167,6 +167,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.FixedAtSide} />
+                        <CoverCard pattern={Pattern.FullBackground} />
                         <CoverCard pattern={Pattern.InitialAvatar} />
                         <CoverCard pattern={Pattern.KeyboardShortcut} />
                         <CoverCard pattern={Pattern.LinedPaper} />

client/patterns/full-background/Cover.tsx

@@ -0,0 +1,39 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ marginBottom: '4px', width: '80%' }}>
+                    <Line backgroundColor='#fff' />
+                </div>
+                <div style={{ marginBottom: '4px', width: '60%' }}>
+                    <Line backgroundColor='#fff' />
+                </div>
+                <div style={{ width: '40%' }}>
+                    <Line backgroundColor='#fff' />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/full-background/Details.tsx

@@ -0,0 +1,77 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Full background">
+            <Helmet>
+                <meta name="description" content="Create a full background element with CSS" />
+                <meta name="keywords" content="css background size cover, css full background" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    height: '100%',
+                                    justifyContent: 'center',
+                                    width: '100%',
+                                }}
+                            >
+                                <div style={{ width: '250px' }}>
+                                    <Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    /* Take full size */
+    height: 100vh;
+    width: 100%;
+
+    /* Background */
+    background: url("/assets/full-background.jpeg") center center / cover no-repeat;
+">
+    ...
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.VideoBackground]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/video-background/Details.tsx

@@ -143,7 +143,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
-            <RelatedPatterns patterns={[Pattern.OverlayPlayButton]} />
+            <RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
         </DetailsLayout>
     );
 };

public/sitemap.xml

@@ -31,6 +31,7 @@
     <url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
     <url><loc>https://csslayout.io/patterns/fixed-at-side</loc></url>
     <url><loc>https://csslayout.io/patterns/floating-label</loc></url>
+    <url><loc>https://csslayout.io/patterns/full-background</loc></url>
     <url><loc>https://csslayout.io/patterns/full-screen-menu</loc></url>
     <url><loc>https://csslayout.io/patterns/holy-grail</loc></url>
     <url><loc>https://csslayout.io/patterns/initial-avatar</loc></url>