Search code examples
razorbackgroundasp.net-core-mvcbackground-image

setting background image to a `<body>`

I'm sure it's a simple fix. I just don't see it. I tried the solutions I saw online but neither worked in my case.

What I'm trying to do:

set background to my <body>

What my code is doing:

  • blank background for the hello world text in my body.
  • only displaying the <img> in my <body> under my hello world.
<head>
    <style>
        body{
            background-image: url("~/images/indeximg0.jpg");
            margin:0;
    </style>
</head>
<body>
        hello
        <br>
        world
        <br>
        <img src="~/images/testrootimg.jpg" alt="">
</body>

What I tried:

(1)

  • change roots from url("~/images/indeximg0.jpg") to url("../../wwwroot/images/indeximg0.jpg");

However my test image after the <br> also disappeared

(2)

  • <body style="background-image: url(~/images/indeximg0.jpg)">

made no difference

additional information:

  • bootstrap 4.6
  • razor framework
Solution

  • Can it help you? This is my testing result

        <style>
        body {
            background-image: url("/images/bg1.png");
        }
    </style>

    enter image description here

    By the way, if you're using asp.net core and using _layout in your project, then you wanna set consistent background image for your site, you should set the style in your _Layout.cshtml.