Help with Dasmoto project - using Linux

Hi all, I’ve just started on the Dasmoto project and have fallen at the first hurdle! I can’t seem to get the css file to link to the html file.

I’ve only started with the first part so far, but nothing seems to be changing when I view it on a webpage. I don’t know if this will affect it, but I’m using Visual Studio Code on a Chromebook laptop which required me to download Linux to use it, not sure if that will have relevance here. Code is below.

<!DOCTYPE html>
<html lang="en">
<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">
    <link href="/Resources/CSS/index.css" rel="stylesheet" type="text/css">
    <title>Dasmoto's Art & Crafts</title>
</head>

<body>
    <div id=header>
        <h1>Dasmoto's Art & Crafts</h1>
    </div>


    
</body>
</html>
    body {
        font-family: Arial, Helvetica, sans-serif
    }

    #header {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100px;
        font-weight: bold;
        color: khaki;
        text-align: center;
        background-image: url(/Resources/Images/titlebackground.jpeg)
    }

The file path in your html and the file path for the background image in your CSS seem to contradict each other. Where is your html located and where is the CSS file in your tree?

Thanks for getting back to me.

The html I created as a standalone file in the project folder. I created another folder in the main folder titled “Resources” another folder in there titled “CSS” and then the css file is located there. Screenshot below if that helps.

Screenshot 2021-04-16 at 13.55.02

Ok then you file path for the css file seems correct. Add a dot to indicate the folder your currently in like:

<link href="./Resources/CSS/index.css" rel="stylesheet" type="text/css">

The file path for the background image is not correct. It must be:

background-image: url("../Images/titlebackground.jpeg")

You need to get out of the CSS folder where the linking file is located with ../. You also have to wrap the path in quote marks.

Amazing, that worked - thank you so much for your help :slight_smile:

1 Like