How to implement media query in React.js for full background image?

Question

can someone help me with a React / css / media query problem? I'm trying to create a frontpage that has a full width and height background image. When I create the styling in the react file with const = bg {..} it works for the desktop-width. But I can't get it to work when using the css file. The media query should switch the image url for smaller screen sizes.

import React from "react";
import { connectContext } from "react-connect-context";
import { Context } from "../context";
import Menu from "./Menu";
import Footer from "./Footer";
import { Header } from "semantic-ui-react";
import "./Frontpage.css";

const textStyle = {
  width: 220,
  height: 50,
  position: "absolute",
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  margin: "auto"
};

class Frontpage extends React.PureComponent {
  render() {
    return (
      <React.Fragment>
        <Menu {...this.props} />
        <div className="bg">
          <Header
            as="h1"
            content="Evolve App"
            textAlign="center"
            inverted
            style={textStyle}
          />
        </div>
        <Footer />
      </React.Fragment>
    );
  }
}

export default connectContext(Context)(Frontpage);

and the Frontpage.css file looks like this:

bg {
  background-image: url(../img/Frontpage_desktop.jpeg);
  background-position: "center";
  background-repeat: "no-repeat";
  opacity: 0.6;
  height: "100vh";
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  bg {
    background-image: url(../img/Frontpage_tablet.jpg);
    background-position: "center";
    background-repeat: "no-repeat";
    opacity: 0.6;
    height: "100vh";
  }
}

@media only screen and (max-width: 767px) {
  bg {
    background-image: url(../img/Frontpage_mobile.jpg);
    background-position: "center";
    background-repeat: "no-repeat";
    opacity: 0.6;
    height: "100vh";
  }
}

iqbal125 iqbal125 · Accepted Answer · 2018-08-13T05:50:02

You can try setting the width from the React component. Try this, use the componentDidMount() lifecycle method and use the window.innerWidth function to set the width of the image and use the image in the component directly.

class Frontpage extends React.PureComponent {
  state = {
  image_width: null,
  image_height: null
  }

  componentDidMount() {
    this.setImageSize()
  }

  setImageSize = () => {
   if(window.innerWidth < 768) {
       this.setState({image_width: 400, image_height: 400})
     } else {
       this.setState({image_width: 500, image_height: 500})
     }  
   }

  render() {
    return (
      <React.Fragment>
        <Menu {...this.props} />
        <img src="../img/Frontpage_tablet.jpg" width={this.state.image_width} height={this.state.image_height} /> 
          <Header
            as="h1"
            content="Evolve App"
            textAlign="center"
            inverted
            style={textStyle}
          />
        </div>
        <Footer />
      </React.Fragment>
    );
  }
}

You may need to use a ternary expression on the image

{ this.state.image_width
 ? <img ... /> 
 : null 
}

I had a similar problem this should work for you.

How to implement media query in React.js for full background image?

1 Answers