CODEWITHSUNDEEP
c#htmlblazorblazor-server-sideblazor-webassembly
SNR
SNR

Reputation: 13

Dynamic Body Background in Blazor Webassembly

I have two different Body Background Images in Blazor Webassembly project of .Net Core 6.0.

My index.html

*<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Project Title</title>
    <base href="/" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
    <style>
        body 
            { 
                background-image: url('/Images/bg-004.jpg');
                background-repeat: no-repeat; 
                background-attachment: fixed; 
                background-size: cover; 
                background-color: rgba(248, 247, 216, 0.7); position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            }
    </style>
</head>

<body>
    <div id="app">Loading...</div>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>
</html>*

I want one Body Background Image for one layout and another Background Image for second Layout. Can anyone please help ?

Upvotes: 0

Views: 2314

Answers (2)

user3682728
user3682728

Reputation: 465

(FYI) Improvement from Ali Poustdouzan's answer after you remove the code. you can create new layout or you can just use only one Layout and call the Layout's method to change it.

MainLayout.razor

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">  
    <div class="content px-4"  >
        <CascadingValue Value="this" Name="MainLayout">
            @Body

        </CascadingValue>
    </div>
</div>


<style>
    body { background-image: url("@bg");
    }
</style>

@code{
    public string bg { get; set; }
    public string bg1 = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkDls4vDbooQjJPTnWTPreMtqtJ6SU0_fcM4PDAfsNF9Wjp8dvg7xKMRKF2HrW9qkNPD0&usqp=CAU";
    public string bg2 = "https://img.online-station.net/_content/2020/0205/156250/gallery/meme_600_399.jpg";

     
    public async Task BgChange(int bgname)
    {
        if ( (bgname %2) ==0  )
        {
            bg = bg2;
        }
        else {
            bg = bg1;
        }
        this.StateHasChanged(); 
    }
}

Page - Index.razor

@page "/"

<h1>Hello, world!</h1>

<SurveyPrompt Title="How is Blazor working for you?" />


Welcome to your new app.
<button @onclick="@Test"> Test Change bg </button>


@code{

    int i = 0;

    [CascadingParameter(Name = "MainLayout")]
    public MainLayout MainLayout { get; set; }

    void Test() => MainLayout.BgChange((i++)); // change on onclick 's bottun event to test MainLayout's method


    protected override async Task OnInitializedAsync() // change  when init page/component
    {
        if (!Initialized)
        {
            MainLayout.BgChange((i++));
        }
    }

}

enter image description here

Upvotes: 0

user17756830
user17756830

Reputation:

First, You need to remove below code in your index.html

background-image: url('/Images/bg-004.jpg');

Second in your MainLayout.razor file set the background

MainLayout.razor

@inherits LayoutComponentBase
<body style="background-image: url('/Images/bg-004.jpg')">
    <div class="page">
        <div class="sidebar">
            <NavMenu />
        </div>

        <main>
            <div class="top-row px-4">
                <a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a>
            </div>

            <article class="content px-4">
                @Body
            </article>
        </main>
    </div>
</body>

You can change the background in other layouts just like MainLayout.razor

Upvotes: 1

Related Questions