Dasmoto's Help

Projects Off-platform Practice Projects
1

I’m stuck on something that’s probably very minor, but it is eluding me! Just trying to set the first background image on the Dasmoto’s Arts and Crafts project and I can’t get it to render in the browser (I’ve tried Chrome and Safari). I’ve tried linking an external style sheet as well as internal and nothing is working. Currently I’m using internal. Here’s my code right now.

<!DOCTYPE html>
<head>
    <title>Dasmoto's Arts & Crafts</title>
    <style>
        h1 {
            font-family: Helvetica;
            font-size: 100px;
            font-weight: bold;
            color: khaki;
            text-align: center;
        }

        #title {
            background-image: url=("/resources/css/pattern.jpeg");
         }

    </style>
</head>

<body>

    <h1 id="title">Dasmoto's Arts & Crafts</h1>
    
</body>

Thanks in advance for any help!

Jarrett

2

Hi!!!
A couple things:
You should keep your CSS in a separate file then link it in the head of the HTML!

Also just make sure your file path is correct for the image. Are you accessing it from the CSS file or the HTML file and where are they in relation to the image file?

You also don’t need the url=() for background images in CSS!

body {
 background-image: url("paper.gif");
}

I hope this helps!

3

Thank you kailiek!

I successfully linked the style sheet now and can verify with Dev Tools that it’s linked, but the image is still not rendering. I’m accessing the image from the css file now and it’s located at the same level as “index.css”. Here’s the style sheet code:

h1 {
    font-family: Helvetica;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: "pattern.jpeg";
}

I’ve gotten rid of the “title” id for simplification so everything is under the h1 tag.

Developer’s Tools shows the background-image as crossed out but the rest of my CSS is fine.

1 Like
4

You may have fixed it by now, but for the background-image, what was meant is that you do not need the ‘=’ sign. It simply needs to be:

background-image: url("./path/to/image.jpeg");

The quotes inside the url() are also optional, but I keep them there habitually.

2 Likes