Kentico Display Image in MVC from Media Libraries

This is my MVC Code to fetch the image and Display it on browser am Getting all the records except the Image This is the Process how uploaded the Image https://i.stack.imgur.com/bxq9P.png

public class BannerService
{
    public IEnumerable<BannerItemViewModels> GetBanners()
    {

        return DocumentHelper.GetDocuments<BannerItem>()
            .Select(x => new BannerItemViewModels()
            {
                Head1 = x.Header1,
                Head2 = x.Header2,
                Head3 = x.Header3,
                ButtonText = x.ButtonText,
                ButtonLink = x.ButtonLink,
                Category = x.Category,
                BackgroundImage = x.Image.
            });

    }
}

This is my BannerItemViewModel

public class BannerItemViewModels
{
    public string Head1 { get; set; }
    public string Head2 { get; set; }
    public string Head3 { get; set; }
    public string Category { get; set; }
    public string ButtonText { get; set; }
    public string ButtonLink { get; set; }
    public DocumentAttachment BackgroundImage { get; set; }

}

Am Displaying the image through this Process

     @foreach (var BannerItem in Model.BannersList){
     <li 
   style="background-        
   image:url(@Url.Kentico().ImageUrl(BannerItem.BackgroundImage.GetPath(),SizeConstraint.Empty))">
            <div class="overlay"></div>
            }