diff --git a/public/page/home/Homepage.jsx b/public/page/home/Homepage.jsx index c791119..7000dbd 100644 --- a/public/page/home/Homepage.jsx +++ b/public/page/home/Homepage.jsx @@ -29,16 +29,18 @@ import Image from './../../image/Image'; import { Title, Subtitle } from './../../typography/Typography'; export default function() { + + return ( <Page style="home-page" className="p-home-page"> - <Section full> + <ImageSection src="//placehold.it/2400x1200" alt="domsPlace"> <PageBoundary full> <FloatingContentBox position="middle right" size="small" className="u-text-center "> <Title>Development & Design</Title> <Subtitle>I'm not good at either.</Subtitle> </FloatingContentBox> </PageBoundary> - </Section> + </ImageSection> <Section full> Lorem diff --git a/public/section/image/ImageSection.jsx b/public/section/image/ImageSection.jsx index 77d8186..0477236 100644 --- a/public/section/image/ImageSection.jsx +++ b/public/section/image/ImageSection.jsx @@ -44,7 +44,11 @@ export default function(props) { className={"c-image-section" + (props.className ? " " + props.className : "" ) } > { image } - {props.children} + <div class="c-image-section__content"> + <div class="c-image-section__content-inner"> + { props.children } + </div> + </div> </Section> ); } diff --git a/public/styles/components/_image-section.scss b/public/styles/components/_image-section.scss index 519b825..036f2d2 100644 --- a/public/styles/components/_image-section.scss +++ b/public/styles/components/_image-section.scss @@ -17,6 +17,18 @@ &.is-full { .c-image-section__image { @include t-absolute-fill(); + object-fit: cover; + object-position: bottom center; + } + } + + &__content { + @include t-absolute-fill(); + + &-inner { + position: relative; + height: 100%; + width: 100%; } } }