简体   繁体   中英

Rails: How to apply background-color to body

Although I'd like to apply background color to body in my rails app, it doesn't work.

application.css

body {
  background-color: red;
}

application.html.erb

<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
  <%= render 'layouts/header' %>
  ...

It would be appreciated if you could give me any suggestion though this is an obvious question.

SOLVED

I changed the order of require in application.css.

before

 *= require_tree .
 *= require_self
...
 *= require bootstrap
 *= require bootstrap-datetimepicker

after

 *= require bootstrap
 *= require bootstrap-datetimepicker
...
 *= require_tree .
 *= require_self

I think your issue is that CSS is loaded incorrectly. Make sure your CSS is loading. Right click on your page in chrome and go to 'element inspect'. Then in the right menu you can check if your CSS is loaded, which it will probably not. For more info on the inspector, check here: https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/?hl=en

Next, in your application.css you should be able to find the structure and sequence via which rails loads your css files. Look for something like this and make sure the "reset" is mentioned as first and your custom somewhere at the bottom.

    *= require reset
    *= require flexboxgrid
    ...
    *= require custom

Once the custom css file is loaded last (at the bottom in the application.css file), you can add in the custom.css file:

   body {
      background: red;
    }

You can try this:

body {
  background: red;
}

This is work for you.

use background instead of background-color. Also for best practices try to write down style in scss format instead of css

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM