Background Image in Styled Components React

Change background image with styled-component

Move your file in public folder and try this command:

<RecommendItem imgUrl={process.env.PUBLIC_URL + '/banner.png'} >

background image in styled components react

Such path is not available in runtime (as CSS-in-JS like styled-component creates the CSS in runtime, although there are solutions with no-runtime), you should try one of the next approaches:

import ImgSrc from '../../img/testlogo.png';
const FormImage = styled.div`
    background-image: url(${ImgSrc});
`;

// or
const FormImage = styled.div`
    background-image: url(${require(`../../img/testlogo.png`)});
`;

React native background image - styled-components

If you want to use a background Image, you should go with react-native ImageBackground

<ImageBackground 
          source={{uri: 'YOUR URL HERE'}}
          style={{ flex: 1}}
        >
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Your Contents</Text>
       </View>

 </ImageBackground >

React.js styled-components importing images and using them as div background

You should import images in the following manner (assuming that you have webpack configured for importing media assets).

import myImage from '../../assets/image.png';

/* ... */

const HeaderImage = styled.div`
  background-image: url(${myImage});
`;

Background image is not showing in Styled Components

(I don't have enough reputation to comment so I'll make an answer for now.)

Test 1:

Are you sure that the soldOutThumb image has a transparent background?

Test 2:

I believe the issue is due to a nested div in your styled component. Try:

export const PreviewSoldOut = styled.div`
  div {      /* <-------- remove this line */
    grid-area: preview;
    width: auto;
    max-height: 560px;
    object-fit: contain;
    background-position: center;
    background-image: url("http://localhost:8000/media/products/saleordemoproduct_cuschion01.png");

    img {
      width: 100%;
      object-fit: contain;
    }
  }        /* <-------- remove this line */
`;

You may need to adjust the styling a bit after removing the nested div. This worked for me:

import React from "react";
import styled from 'styled-components'
import "./styles.css";

const PreviewSoldOut = styled.div`

    width: auto;
    height: 500px;
    background-image:  url("https://ychef.files.bbci.co.uk/1600x640/p02940bz.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */

`;

//         
export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <PreviewSoldOut>
        <img src='https://udi.bc.ca/wp-content/uploads/2018/04/Sold-Out-Transparent-300x129.png' />

      </PreviewSoldOut>
    </div>
  );
}

Dynamic background image with styled-components

Replace :

`background-image: url(${weather => (weather === 'Drizzle) ? Drizzle : Cloudy})`

by :

`background-image: ${(props) => props.current === 'Drizzle' ? `url(${Drizzle})` : `url(${Cloudy})`};`

App.js

import React from 'react';
import './App.css';

import Card from './Card';

export default function App() {
  return <Card weather="Drizzle" />;
}

Card.js

import React from 'react';
import styled from 'styled-components';

import Drizzle from './img/Drizzle.jpg';
import Cloudy from './img/Cloudy.jpg';

export default function Card({ weather }) {   
  return (
   <CardItems current={weather} />
  );
}

const CardItems = styled.div`
  height: 100vh;
  width: 100%;
  background-image: ${(props) =>
    props.current === 'Drizzle' ? `url(${Drizzle})` : `url(${Cloudy})`};
`;

Dynamic background image in React.js with styled-components

For anyone else who want the solution, using styled-components

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
background-image: `url(${props => props.imgObj ? props.imgObj.url : 'PLACEHOLDERIMG.png'})` // this is where I think the problem is
`;

const Component = ({ imgObj, otherStuff }) => (
<Container imgObj> // <=== Here is where the problem actually is!
    {otherStuff}
</Container>
);

export default Component

The reason is that you forget to insert imgObj props to your Container styled-component. So the component don't know where find props.imgObj.

---

Related Topics