CODEWITHSUNDEEP
reactjscssjsx
Arasto
Arasto

Reputation: 491

Setting Background-Image in React

I want the image to behave as if it was set as an background-url and function like this:

img.thisIsMyImage {
 background: url("../../services/images/hehe.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 

animation: increase 60s linear 10ms infinite;
-webkit-transition: all 5.2s ease-in-out;
-moz-transition: all 5.2s ease-in-out;
-ms-transition: all 5.2s ease-in-out;
-o-transition: all 5.2s ease-in-out;
transition: all 5.2s ease-in-out;

}

This is the React Code

 render() {
    return (
    <div>
        <img src={rsm_logo} className="thisIsMyImage" alt="containerLogo" />
        <LoginForm submit={this.submit} />
    </div>
    )
}

This works perfectly fine when done like the code above in the CSS, but i want it to be applied to the element that is in the .jsx code on the element "thisIsMyImage" and stil have the same behaviour as in the css code.

Any suggestions are much appreciated, thank you.

Upvotes: 0

Views: 8289

Answers (4)

Arasto
Arasto

Reputation: 491

BackgroundImage.js

import './YourFileName.css'
import Image from '../path/path/path/image.jpeg'

export const BackgroundImage = () => {
    return (
      <>
        <img className="backgroundImage" src={Image} alt={"Error"} />
      </>
    )
}

YourFileName.css

.backgroundImage {
    width: 100%;
    height: 100vh;
}

Upvotes: 1

Leonardo Lima
Leonardo Lima

Reputation: 496

you can import css and set the class

class Hello extends React.Component {
  render() {
    return (
    	<div>
      	Hello {this.props.name}
        
        <div className='imgStyle' />
      </div>
		);
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);
.imgStyle {
  background: url("https://placekitten.com/600/200") no-repeat center center fixed; 
  
  width: 600px;
  height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
</div>

Upvotes: 0

Avanthika
Avanthika

Reputation: 4182

Why are you using src and background in img tag together? It's weird to use img tag here. Img src will take precedence. You may have to provide suitable width & height for the image to show up.

I have attached an example with div and img tag.

.thisIsMyImage {
    background: url("https://via.placeholder.com/150") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    animation: increase 60s linear 10ms infinite;
    -webkit-transition: all 5.2s ease-in-out;
    -moz-transition: all 5.2s ease-in-out;
    -ms-transition: all 5.2s ease-in-out;
    -o-transition: all 5.2s ease-in-out;
    transition: all 5.2s ease-in-out;
    width:150px;
    height:150px;
}
<div class="thisIsMyImage" title="containerImage"></div>

<img src="https://via.placeholder.com/150" class="thisIsMyImage" title="containerImage" />

Import the css in the main file to avoid multiple imports.

import from './styles.css'

And in the render function, I suggest to use a div instead of img tag if you are going to use background & background-related-properties.

render() {
  return (
    <div>
      <div className="thisIsMyImage" title="containerLogo" />
      <LoginForm submit={this.submit} />
    </div>
  )
}

Upvotes: 0

James Delaney
James Delaney

Reputation: 1776

You need import css file into react component like this:

 // remove "img" from class in css
 img.thisIsMyImage {
     background: url("../../services/images/hehe.jpg") no-repeat center center fixed; 
  }

 // like this:
 .thisIsMyImage {
   background: url("../../services/images/hehe.jpg") no-repeat center center fixed; 
 }

In react component import your css file: 

import from './styles.css'

<img src={rsm_logo} className="thisIsMyImage" alt="containerLogo" />

Upvotes: 0

Related Questions