1

I'm still fiddling with MVC and I want to set a full background image which would be retrieved from the database.

This is what I used to do in CSS and love to do whenever I need full background:

.banana3-sm{
    background-image: url('../images/banana3-sm.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
}

Below is what I'm using currently because I don't know how to upload the image link from database to CSS.

In Controller:

model.ImgSrc = Convert.ToBase64String(model.Image);

In CSHTML:

<div class="col-lg-6 col-md-6 visible-md visible-lg">
    @Html.Partial("_ProductImage", Model)
</div>

In PartialView

<img class="img-responsive" src="@imgSrc" alt="Product Image" />

But the image isn't as responsive as I want it to be in the above <img> way.

So there a way I could insert the image link into here dynamically?

background-image: url('xx/xx/xxxx.png');

Thanks in advance!

And I have already read these similar threads as well on here:

how-to-apply-full-background-image-in-asp-net-mvc

css-background-image-refuses-to-display-in-asp-net-mvc

Improve this question
8
  • If the CSS style is in a separate file, you may try using JS for img tag to manipulate default background: $(".img-responsive").css("background-image", "url('@Url.Content("~/path/image/from/DB")')" );. Commented Oct 30, 2017 at 7:36
  • @TetsuyaYamamoto Thanks mate. Will try it out now. Commented Oct 30, 2017 at 8:05
  • why don't use the style on div? Something like this: style="background-image: url(@Model.imgSrc)" Commented Oct 30, 2017 at 8:37
  • So I tried something like you suggested. <div class="col-lg-6 col-md-6 visible-md visible-lg product-img" style="background-image: url('@Url.Content(@imgSrc)');"> And I'm getting a background-image: url('data:image/png;xxxAVERYLONGSTRINGxxx'); But no image. Commented Oct 30, 2017 at 10:08
  • <div class="product-img" style="background-image: url(@imgSrc);"> didn't work as well. Any idea? =( Commented Oct 30, 2017 at 10:16
Related questions
1
Uploading image in MVC
2
ASP.NET MVC3: upload image and save it to database
41
Uploading image in ASP.NET MVC
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.