CODEWITHSUNDEEP
javascripthtmlcssreactjsstyled-components
Blue
Blue

Reputation: 251

Using Styled Components can't get the whole background a certain color

So I am sure it's something very simple but I can't get the background to cover the whole background, simple as that. I say simple, but I will provide the code I have used.

Basically only a quarter of the top of the screen is black basically if I only have something wrapped in the component.

Home.js -

import React from 'react'
import styled from "styled-components";
import Background from './images/Cryptid.png'

const Home = () => {

    return (

        <Container>
            <InnerContainer>
                <Logo />
                <JoinInfo><p>test</p></JoinInfo>
            </InnerContainer>
        </Container>
    )


}

const Container = styled.div`
display: flex;
height: 100%;
width: 100%;
background: black;
background-size: cover;
`;

const InnerContainer = styled.div`
height: 100%;
width: 100%;

`;

const Logo = styled.div`
border: 1px solid red;
margin: auto;
padding: auto;
height: 100px;
width: 400px;
background-image: url(${Background});
    `

const JoinInfo = styled.section`
color: white;
`
export default Home;

Upvotes: 1

Views: 1642

Answers (1)

Will
Will

Reputation: 1640

You can add the background color to the html body element then it will cover the whole screen:

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    background: black;
  }
`

const <Home> = () => 
  <GlobalStyle />
  <Navigation /> {/* example of other top-level stuff */}
</Home>

Upvotes: 2

Related Questions