CODEWITHSUNDEEP
reactjsstyled-components
Ruth
Ruth

Reputation: 634

Background image from props does not work using styled components

I have a styled component which I pass a url to be used as a background image but it does not work. I've seen other similar questions but nothing has fixed it.

My styled component:

export const BackgroundImage = styled.div`
  background: ${props => `url(${props.background})`};
  background-position: center;
  background-size: cover;
`;

I use it like this:

<BackgroundImage background="https://imageurl.jpg" />

When I look at the developer tools in the browser I get this:

enter image description here

So it looks like it has complied correctly but you can't actually see the image on the page.

Upvotes: 1

Views: 2083

Answers (1)

davbuc
davbuc

Reputation: 537

I tested it right now and I think the problem is here that <BackgroundImage/> - Component does not have any height?

As soon as i give it a height e.g. height: 100vh; it's working fine.

Upvotes: 2

Related Questions