Background image not showing in ASP.NET Core

Issue

I am trying to add a background image to my ASP.NET Core application, but it’s not showing.

Even a normal is not showing.

<div class="landing">
    <div class="text-center">
        <h2> app</h2>
        <h4>blah </h4>
        <button class="btn-success">See what we have</button>
    </div>
</div>
<style>
    .landing {
        background-image: url(..\..\wwwroot\images\bkimage.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        height: auto;
    }
</style>

Solution

I’ll assume the snippet above is from an MVC view. When you’re using the wwwroot folder, that represents the static content root against which other things can reference (unless you’ve explicitly changed that). So, the ‘wwwroot/images/bkimage.jpg’ would just be the root-relative path ‘/images/bkimage.jpg’ off that.

Try the following:

background-image: url('/images/bkimage.jpg'); 

Answered By – Adam

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published