web-dev-qa-db-fra.com

Définir l'arrière-plan dans React.js en utilisant un style

Je souhaite ajouter une image d'arrière-plan dans React.js en utilisant une définition de style, qui fonctionne:

let imgUrl = 'images/berlin.jpg'    
let styles = {
        root: {
            backgroundImage: 'url(' + imgUrl + ')',
            overflow: 'hidden',
        },
        ...

 enter image description here

Comme vous pouvez le constater, l'image se répète dans la direction x. Je voulais donc l'étendre de:

let imgUrl = 'images/berlin.jpg'
let styles = {
    root: {
        backgroundImage: 'url(' + imgUrl + ')',
        backgroundImage: {
            flex: 1,
            resizeMode: 'cover', // or 'stretch'
        },
        overflow: 'hidden',
    },
    ...

Mais l'image n'est plus chargée:

 enter image description here

Alors, comment définir l’image d’arrière-plan et l’ajuster dans React.js?

javascriptcssreactjs
9
Marcel

Cela marche:

    let imgUrl = 'images/berlin.jpg'
    let styles = {
        root: {
            backgroundImage: 'url(' + imgUrl + ')',
            backgroundSize: 'cover',
            overflow: 'hidden',
        },
        ...

 enter image description here

10
Marcel

Clarifier une autre réponse

let imgUrl = 'images/berlin.jpg'
let styles = {
    root: {
       backgroundImage: `url(${ imgUrl })`
       backgroundRepeat  : 'no-repeat',
       backgroundPosition: 'center',
  }
}

5
Rodrigo Cipriani da Rosa

Avez-vous essayé quelque chose comme ça:

let imgUrl = 'images/berlin.jpg'
let styles = {
root: {

    background: 'url('+ imgUrl + ') noRepeat center center fixed',
    backgroundSize: 'cover',
}

Inspiré de cet article: Étire et redimensionne une image CSS en arrière-plan - avec CSS uniquement

4
FLCcrakers

Si vous utilisez une image en tant qu'arrière-plan, il est préférable d'utiliser la propriété 'backgroundImage'. 

Si vous utilisez la propriété 'background', des problèmes peuvent survenir lors du rechargement du composant (l'attribut 'cover', par exemple, ne s'appliquera pas correctement). 

Solution proposée:

let imgUrl = 'images/berlin.jpg'; 

<div className = 'Component-Bg' 
     style = {{ backgroundImage: 'url(' + imgUrl + ')', 
                backgroundSize: 'cover', 
                backgroundPosition: 'center center',
                backgroundRepeat: 'no-repeat',
              }}>
</div>
2
Erik Martín Jordán