Background from CSS not working in Base.html

问题

The following base.html code is not implementing the gradient background from the css file that is in the same folder.

base.html:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" text="text/css" href="templates/css/style.css">
  </head>

<body>
<h1>hi</h1>
</body>
</html>

style.css:

body {
background: linear-gradient(to bottom, #faaca8, #ddd6f3);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;

}

回答1:

If this is not working, the problem is going to be the fact that you are referring to a different directory than you are wanting for the style.css folder. If it's in the same folder, please change the href in the link to href="style.css".

This is assuming you have one folder with the base.html and in the SAME folder, there is also the style.css stylesheet .

If it's based on the root directory, you would use /style.css , or on the folder before, ../foldername/style.css. For more, read here.

回答2:

text="text/css" should read type="text/css"

回答3:

Put the css codes inside the body tag or you can do it like this

   body {
    background: linear-gradient(to bottom, #faaca8, #ddd6f3);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;

    <!doctype html>
    <html lang="en">
      <head>
    <link rel="stylesheet" type="text/css" href="style.css">  </head>
    
    <body>
    <h1>hi</h1>
    
    
   
    </body>
    </html>

来源：https://stackoverflow.com/questions/59187032/background-from-css-not-working-in-base-html

标签

html

css

background-image

gradient

css-gradients