Question 223102 in CSS Question posted in
Some basic documentation can be found here.

Css – Can not change backgound color in blazor page

I would like to change the background color of a Blazor page.

I have an empty test page called TestLayout and an attached css file.

enter image description here

In the CSS I just have the body tag

body {
background-color: yellow;}

But the page remain white.

Using the debbuging tools one can see that the background is still white comming from bootstrap.
enter image description here

I tried

body {
background-color: yellow !important;}

But nothing chnages.

If I change the color in the dev tools it works

enter image description here

How can I overwrite the bootstarp settings?

Tags:

2

Answers


  1. 0

    Have you tried clearing the cache?

    Login or Signup to reply.
  2. 0

    It all depends on what you want to colour. The TestLayout component doesn’t have a body – it’s part of the body.

    Altered Index.razor to provide a wrapper div we can apply our Css to.

    @page "/"
<div class="my-background">
    <PageTitle>Index</PageTitle>

    <h1>Hello, world!</h1>

    Welcome to your new app.

    <div class="p-2">
        <SurveyPrompt Title="How is Blazor working for you?" />
    </div>
</div>

    And Index.Razor.css

    div.my-background {
    background-color: lightyellow;
}

    If you want to colour the background container then you need to drop down to the Layout

    MainLayout.razor.css

    
article {
    background-color: cornflowerblue;
}

main {
    background-color:darkslategray;
}

    Which gives you this mess:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search