External CSS background Image-CodePudding

I do not understand WHAT I am doing wrong. I'm new to this and just trying to follow this online course...

So I have my HTML file and all I'm trying to do is shove my tiny bit of CSS into a separate .css file.

When I use < link rel="stylesheet" href="./Documents/Untitled1.css > in the head tag of my HTML file, referring to my CSS code that just states a basic CSS, the background does not change...

HOWEVER, if I use the style tag inside my head tag... it works JUST fine using my CSS code.

body {
   
 background-image: url("./images/rain.jpg");
    
background-repeat: no-repeat;
    
background-size: cover;
  }

Please someone tell me what I'm doing wrong...

CodePudding user response：

<style>
body{
    background-image: url('https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg');
    background-repeat: no-repeat;

    background-size: cover;
 }   
</style>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="stack.css">
</head>
<body>
    
</body>

I think your CSS href path I guess !! not sure you can check the above code

CodePudding user response：

Name your styles file "style.css", put style.css to the same folder where you have your *.html file and inside html file paste this line:

<link rel="stylesheet" type="text/css" href="./style.css" />

Your issue is caused by wrong path to css

CodePudding user response：

you have a whitespace character between tag opening and the link keyword

< link rel="stylesheet"...

should be

<link rel="stylesheet"...

also - do you really have your css in Documents folder?

CodePudding user response：

I know what's wrong here, I have faced this issue so many times. The background image doesn't show up because you haven't set a height to it.

body {
 height: 100%
}

This will do the work. Reference

CodePudding user response：

is your HTML and CSS in the same folder? If yes then just use

<link rel="stylesheet" href="Untitled1.css">