Background image not showing in ASP.NET Core

Question

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>

Adam · Accepted Answer · 2020-05-12 00:53:35Z

5

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 May 12, 2020 at 0:53

Adam

3,9552 gold badges13 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ahdung Jun 18 at 3:43

how about with base path? ~/ not work in url()

Adam Jun 18 at 12:33

CSS is not modified by the Razor syntax like in views, so you must reference a valid relative or absolute URL. Either your image is in your wwwroot folder (the "base" path as it pertains to your hosted app) and you can just do /image.jpg, or you mean the base folder in your project, in which case the question is more involved ("How can I expose images from other places than the wwwroot folder?") and that should be asked separately.

ahdung Jun 20 at 7:25

/image not equals ~/image, in my case, the answer is Url.Content("~/")

Adrian Mole · Accepted Answer · 2022-08-05 11:37:21Z

0

Height attribute must be quantified. For example: height:400px.

edited Aug 5, 2022 at 11:37

Adrian Mole

52.2k193 gold badges61 silver badges101 bronze badges

answered Jul 31, 2022 at 8:16

mahdieh shabani

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Background image not showing in ASP.NET Core

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related