maverick/netlify-cms-react-starter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update BackgroundImage

Browse source
This commit is contained in:
Eric Jinks 2018-03-27 15:40:09 +10:00
parent 228d997143
commit a341c43075
1 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/BackgroundImage.js
View file

@ -9,7 +9,10 @@ import { getImageSrc } from '../util/getImageUrl'
export default class BackgroundImage extends React.Component {
static defaultProps = {
lazy: false,
src: ''
src: '',
className: '',
contain: false,
opacity: 1
}
state = {
@ -44,7 +47,7 @@ export default class BackgroundImage extends React.Component {
}
render () {
let className = this.props.className || ''
let { className, contain, opacity } = this.props
if (this.state.loaded) className += ' BackgroundImage-lazy-loaded'
if (this.props.lazy) className += ' BackgroundImage-lazy'
const options = {
@ -56,12 +59,12 @@ export default class BackgroundImage extends React.Component {
return (
<Observer {...options}>
<div
className={`BackgroundImage absolute ${className || ''}`}
className={`BackgroundImage absolute ${className}`}
src={this.state.src}
style={{
backgroundImage: `url(${this.state.src})`,
backgroundSize: this.props.contain ? 'contain' : 'cover',
opacity: this.props.opacity || 1
backgroundSize: contain ? 'contain' : 'cover',
opacity: opacity
}}
/>
</Observer>