3

I want to add background image, to part of my header i wrote code like this. but its not working.

<div style="{!'background:' + v.backgroundColor + ' url(' + v.backgroundImageURL +') no-repeat;background-position: center;background-size: cover;'}">

</div>

doInit : function(component, event, helper) {

        var url = $A.get('$Resource.RollingHillsGrey1');
        component.set('v.backgroundImageURL', url);
    }
3
  • I personally think this is a much better way to apply styling to your div developer.salesforce.com/docs/atlas.en-us.lightning.meta/…
    – Rao
    Commented Sep 28, 2017 at 16:29
  • 1
    @Rao That won't work for dynamic images, but you're right that you should prefer to use this technique when possible.
    – sfdcfox
    Commented Sep 28, 2017 at 16:37
  • point noted fox
    – Rao
    Commented Sep 28, 2017 at 16:41

1 Answer 1

5

You need to specify some content and/or a height in order for this to work. I tweaked your code slightly to display the image as a background image:

<div style="{!'position: relative; height: 30vh; background:' + v.backgroundColor + ' url(' + v.backgroundImageURL +') no-repeat;background-position: center;background-size: cover;'}">

</div>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .