CODEWITHSUNDEEP
reactjscssstylesheet
aashir khan
aashir khan

Reputation: 538

React background image overlay opacity

Do not find a way that how to set background image overlay opacity in reactjs, I am trying to do something like that.

STYLE

const styles={ 
 header:{ 
 background: 'rgba(0, 0, 0, 0.5)', 
 backgroundImage:url(${background}),
 height: '100vh', 
 backgroundPosition:'center', 
 backgroundRepeat: 'no-repeat',
 backgroundSize: 'cover' 
 }
}

JSX

<div style={styles.header}>
      <div>
        Portfolio
      </div>
</div>

Upvotes: 4

Views: 20560

Answers (1)

Denys Kotsur
Denys Kotsur

Reputation: 2599

You should add styles to your inner block and set background color there. Also, I advice you to use string templates to make valid value for backgroundImage style.

Here we are:

const styles = {
  header: {
    backgroundImage: `url(${background})`,
    height: '100vh',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover'
  },

  content: {
    height: '100%',
    width: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  }
}

<div style={styles.header}>
  <div style={styles.content}>
     Portfolio
  </div>
</div>

The example code here.

Upvotes: 5

Related Questions