Search code examples
c#razorblazor

how to add a razor background image

I am trying to add a background image to my blazor project, but when I put a background image I appear on all the pages that I have, How can I do so that the image I want in background only appears in use single page and not on the plus ones?, I have a component (which I use as layout) in which I put the following, this so that in my login I do not appear the menu (I have it as LoginLayout.razor)

@inherits LayoutComponentBase

<div class="col-md-10">
    @Body
</div>

And that LoginLayout I use on my Login.razor page

Solution

  • If I understand you correctly you want a background image for a specific Blazor page/component.

    If you have the following setup in your site.CSS/app.CSS:

    .page-background-class {
    background-image:url(../images/image-name.png)
}

    Then in your page you can enclose everything in a div element and give it the class of page-background-class:

    <div class="page-background-class">
    page stuff goes here
</div>